CSS 表格宽度 – 100% + 减去边距

在本文中，我们将介绍如何在CSS中设置表格的宽度为100%，并减去边距。

阅读更多：CSS 教程

CSS 表格基础知识

在开始介绍CSS表格的宽度设置之前，让我们先了解一些CSS表格的基础知识。

在HTML中，我们可以使用<table>标签来创建表格，而CSS可以用来对表格进行样式设置。通过CSS样式设置，我们可以调整表格的宽度、背景颜色、边框样式等。

在CSS中，我们可以使用width属性来设置元素的宽度。默认情况下，表格的宽度是根据内容自动调整的。但有时我们希望表格的宽度占据整个容器的宽度，这时我们可以使用百分比来设置表格的宽度。

设置表格宽度为100%

要将表格的宽度设置为100%，我们可以将表格元素的width属性设置为100%。例如，下面的代码演示了如何将表格的宽度设置为100%：

<style>
  table {
    width: 100%;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

在上面的例子中，我们使用CSS将表格的宽度设置为100%。这样表格就会占据其父元素（容器元素）的宽度。

减去边距

如果我们希望在表格的宽度为100%的基础上，减去一定的边距，我们可以使用CSS的margin属性来实现。

CSS的margin属性用于设置元素的外边距。我们可以为元素的上、右、下、左四个方向分别设置不同的值，也可以使用简写形式。

要减去表格的边距，我们可以将表格元素的margin属性设置为负值。例如，下面的代码演示了如何将表格的宽度设置为100%并减去10像素的边距：

<style>
  table {
    width: calc(100% - 20px);
    margin: -10px;
  }
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

在上面的例子中，我们使用CSS的calc()函数将表格的宽度设置为100%减去20像素。然后，我们将表格的外边距设置为-10像素，从而达到减去边距的效果。