CSS设置表格的边框

最新推荐文章于 2025-04-13 18:35:52 发布

量变决定质变

最新推荐文章于 2025-04-13 18:35:52 发布

阅读量9.1k

点赞数 3

分类专栏： ————CSS

本文链接：https://blog.youkuaiyun.com/nangeali/article/details/52832249

版权

————CSS 专栏收录该内容

39 篇文章

订阅专栏

CSS设置表格的边框

HTML中<table>标记，其中有很多关于表格边框的属性。

Border属性用于设置表格边框的粗细，当值为0时，表明表格没有边框。

Bordercolor属性设置表格边框的颜色，采用十六进制的颜色RGB模式，但是，两个浏览器对该属性的支持有明显的差别，因此，不推荐使用。

CSS通过border属性来设置边框，设置方法和图片的边框完全一样，但是，在表格中需要注意单元格之间的关系。

当代码如下，仅仅是设置表格的边框时，单元格不会有任何的边线。

<span style="font-size:24px;">.datalist{
       border:1pxsolid #007eff;
       font-family:Arial;
}</span>

因此，使用CSS设置表格的边框时，也需要为单元格单独设置边框，代码如下：

<span style="font-size:24px;">.datalist th, .datalist td{
	border:1px solid #429fff;
}</span>

此时，会发现单元格的边框之间有间隙，需要设置CSS中整个表格的border-collapse属性，使边框重叠在一起，代码如下：

<span style="font-size:24px;">.datalist{
       border:1pxsolid #007eff;
       font-family:Arial;
       border-collapse:collapse;
}</span>

最后，综合文字字体、大小和颜色等的设置即可，代码如下：

<span style="font-size:24px;"><html>
       <head>
              <title>
                     年度收入
              </title>
              <style>
                     <!--
                     .datalist{
                     border:1pxsolid #429fff;
                     font-family:Arial;
                     border-collapse:collapse;
              }
                     .datalistcaption{
                     padding-top:3px;
                     padding-bottom:2px;
                     font:bold1.1em;
                     background-color:#f0f7ff;
                     border:1pxsolid #429fff;
              }
                     .datalistth{
                     border:1pxsolid #429fff;
                     background-color:#d2e8ff;
                     font-weight:bold;
                     padding-top:4px;padding-bottom:4px;
                     padding-left:10px;padding-right:10px;
                     text-align:center;
              }
                     .datalisttd{
                     border:1pxsolid #429fff;
                     text-align:right;
                     padding:4px;
              }
                     -->
              </style>
       </head>
      
       <body>            
              <tablesummary="This table shows the yearly income for years 2004 through2007" border="1">
                     <caption>年度收入2004-2007</caption>
                     <tr>
                            <th></th>
                            <thscope="col">2004</th>
                            <thscope="col">2005</th>
                            <thscope="col">2006</th>
                            <thscope="col">2007</th>
                     </tr>
                     <tr>
                            <thscope="row">捐款</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">拨款</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">投资</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">募捐</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
                     <tr>
                            <thscope="row">销售</th>
                            <td>11.980</td>
                            <td>12.650</td>
                            <td>9.700</td>
                            <td>10.600</td>
                     </tr>
              </table>
       </body>
</html></span>