使用border-collapse实现细线表格

使用border-collapse实现细线表格:

原生状态的表格边框是令人生厌的,所以对于表格边框的美化是一项重要的工作,下面通过代码实例介绍一下如何利用border-collapse属性实现细线表格效果。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
.table{
  border:1px solid #ccc;
  border-collapse:collapse;
  width:80%;
}
.table th, .table td{
  border:1px solid #ccc;
  padding:10px;
  text-align:center;
}
</style>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>id</th>
      <th>作者</th>
      <th>书名</th>
      <th>内容</th>
      <th>分类</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>一</td>
      <td>蚂蚁部落一</td>
      <td>蚂蚁部落二</td>
      <td>蚂蚁部落三</td>
      <td>蚂蚁部落四</td>
    </tr>
    <tr class="success">
      <td>二</td>
      <td>蚂蚁部落一</td>
      <td>蚂蚁部落二</td>
      <td>蚂蚁部落三</td>
      <td>蚂蚁部落四</td>
    </tr>
  </tbody>
</table>
</body>
</html>

以上代码实现了我们的要求,完美实现了表格的细线表格效果。

原文地址是:http://www.51texiao.cn/HTML5jiaocheng/2015/0612/4020.html

最为原始地址是:http://www.softwhy.com/

时间: 2024-11-29 06:18:38

使用border-collapse实现细线表格的相关文章

Css制作table细线表格

Css制作table细线表格 关键点: table {border-collapse:collapse; /* 关键属性:合并表格内外边框(其实表格边框有2px,外面1px,里面还有1px哦) */border:1px solid #999; /* 设置边框属性:样式(solid=实线).颜色(#999=灰) */}

CSS实现细线表格

做细线表格,用border-collapse:collapse;定义在table中,然后对td做border:1px solid #f00;边框样式定义即可. 例:<style type="text/css">table{width:600px;margin:0px auto;font:Georgia 11px;color:#333333;text-align:center;border-collapse:collapse;}table td{border:1px soli

HTML细线表格的实现

在网页制作中,我们常常会使用到表格,表格使得需要表达的信息更清楚,明了. <table border="1" cellspacing="0" bordercolor="#000000" width = "80%"> <tr> <th>姓名</th> <th>年龄</th> </tr> <tr> <td>111</t

由合并细线表格而产生的疑问与解答

一.背景 学习CSS之前制作的表格边框效果单一,且产生对于border属性的疑问,私下查找资料.写代码举例子,做总结. 二.深度理解table 中border 的定义 如下一个简单普通表格,代码如下: <body>    <table  bordercolor="red"  border="1px"  width="300px" height="100px">        <tr>    

如何使用CSS实现细线表格效果

如何使用CSS实现细线表格效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.虽然在使用布局的时候不提倡使用table,但是table并非是一个不能使用的元素,只要和CSS配合使用得当,还是具有相当的威力,并且在特地的情况使用table比使用div更有优势,例如在制作表格,但是表格自带的边框比较丑陋,下面介绍一下如何使用CSS实现细线表格效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="

2015-09-22CSS:border、background、表格、超链接、overflow、firebug

1.CSS的border属性 ⑴定义和用法 border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 border:solid #ff0000; 也是允许的. 值 描述 border-width 规定边框的宽度. border-style 规定边框的样式.例如,solid.dashed.dotted.none. border-color 规定边框的颜色.

CSS 构造表格

表格边框 CSS 中设置表格边框,请使用 border 属性: <style type="text/css"> table{ border:1px solid red; } th,td{ border:1px solid red; } </style> </head> <body> <table> <tr> <th>姓名</th> <th>描述</th> </t

表格使用总结

细线表格: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>细线表格</title> <style type="text/css"> table{ border-collapse:collapse; } td{height:30px;width:50px;border-spacing:0px;border-colla

表格和表单

一.表格table 表格用table表示,表格中的每一行用tr表示,表格中的每一列用td表示: th表示的是:表头.表头中的文字,默认为加粗居中.th要放在tr中,用于替换掉td. <table> <tr> <td>标题一</td> <td>标题二</td> <td>标题三</td> </tr> <tr> <td>1-1</td> <td>1-2<