如何使用CSS设置表格的边框宽度和样式？

翻滚的胖子
2023-08-01 10:44:54
CSS JavaScript

表格是网页中常用的元素之一，通过设置表格的边框宽度和样式，可以使表格更加美观和易于阅读。本文将详细介绍如何使用CSS设置表格的边框宽度和样式。

一、边框宽度的设置

表格的边框宽度可以通过CSS的border-width属性进行设置。border-width属性有以下几种取值：

1	`border-width:` `thin;`

以上代码将设置表格边框的宽度为thin，也可以使用其他取值如medium、thick等。同时也可以通过设置具体的像素值来控制边框宽度：

1	`border-width:` `1px;`

以上代码将设置表格边框的宽度为1像素。

二、边框样式的设置

表格的边框样式可以通过CSS的border-style属性进行设置。border-style属性有以下几种取值：

1	`border-style:` `solid;`

以上代码将设置表格边框的样式为实线，也可以使用其他取值如dashed、dotted等。同时也可以通过设置none来隐藏表格边框：

1	`border-style:` `none;`

以上代码将隐藏表格的边框。

三、代码案例

下面是一个代码案例，演示了如何同时设置表格的边框宽度和样式：

<style>
  table {
    border-collapse: collapse;
    border-width: 1px;
    border-style: solid;
  }
  th, td {
    border-width: 1px;
    border-style: solid;
    padding: 10px;
  }
</style>
 
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
  </tr>
</table>