CSS 哪个表属性指定了表格单元格之间应该出现的宽度

在HTML中，表格包含列和行。默认情况下，表格单元格不包含两个单元格之间的空间。如果我们在表格单元格之间添加一些空间，可以改善表格的用户界面。

在CSS中，’border-spacing’属性添加表格单元格之间的空间。而且，在使用’border-spacing’ CSS属性时，我们需要使用’border-collapse’ CSS属性，并将其值设置为’separate’。

语法

用户可以按照以下语法使用’border-spacing’ CSS属性来添加表格单元格之间的空间。

table {
   border-collapse: separate;
   border-spacing: 3rem;
}

在上述语法中，我们使用了‘border-collapse’和‘border-spacing’的CSS属性来设置表格元素。

示例1

在下面的示例中，表格包含了各个国家的数据，并且有三列分别包含国家名称、首都和人口。

我们使用了‘border-spacing’的CSS属性来在两行和两列之间添加3rem的间隔。在输出中，用户可以观察到表格单元格之间的间距。

<html>
<head>
   <style>
      th, td {
         border: 1px solid blue;
         padding: 5px;
         text-align: left;
      }
      table {
         border-collapse: separate;
         border: 3px dotted green;
         border-spacing: 3rem;
      }
   </style>
</head>
<body>
   <h3> Using the border-spacing CSS property to add spaces between table cells </h3>
   <table>
      <tr>
         <th> Country </th>
         <th> Capital </th>
         <th> Population </th>
      </tr>
      <tr>
         <td> India </td>
         <td> New Delhi </td>
         <td> 1.3 billion </td>
      </tr>
      <tr>
         <td> China </td>
         <td> Beijing </td>
         <td> 1.4 billion </td>
      </tr>
      <tr>
         <td> United States </td>
         <td> Washington, D.C. </td>
         <td> 325 million </td>
      </tr>
      <tr>
         <td> Indonesia </td>
         <td> Jakarta </td>
         <td> 250 million </td>
      </tr>
   </table>
</body>
</html>

示例2

在下面的示例中，我们创建了一个包含人的名字、姓氏和年龄的表格。此外，我们还创建了一个输入框，用于接受用户的数字输入。

我们在JavaScript中访问了数字输入，并添加了“input”事件。因此，每当用户更改数字输入的值时，它都会改变“border-spacing”CSS属性的值，并根据值的增加和减少来增加和减少间距。

<html>
<head>
   <style>
      th, td {
         border: 1px solid blue;
         padding: 5px;
         text-align: left;
      }
      table {
         border-collapse: separate;
         border: 3px dotted green;
      }
   </style>
</head>
<body>
   <h3> Using the <i> border-spacing </i> CSS property to add spaces between table cells </h3>
   <p> Enter a value in px to set space between table cells </p>
   <input type="number" id="space">
   <br> <br>
   <table id = "nameTable">
      <tr>
         <th> Firstname </th>
         <th> Lastname </th>
         <th> Age </th>
      </tr>
      <tr>
         <td> Jill </td>
         <td> Smith </td>
         <td> 50 </td>
      </tr>
      <tr>
         <td> Eve </td>
         <td> Jackson </td>
         <td> 94 </td>
      </tr>
      <tr>
         <td> John </td>
         <td> Doe </td>
         <td> 80 </td>
      </tr>
   </table>
   <script>
      var table = document.getElementById("nameTable");
      let space = document.getElementById("space");
      space.addEventListener('input', function () {
         table.style.borderSpacing = space.value + "px";
      });
   </script>
</body>
</html>