在表格中排列标题和数据（html & css）答案

【问题标题】：Lining up headers and data in tables (html & css)在表格中排列标题和数据（html & css）
【发布时间】：2021-08-20 19:39:07
【问题描述】：

我正在阅读表格上的 CSS tutorial，在其中一个示例中，作者创建了一个表格，该表格在 <td> 上有边框，但在 <th> 上没有边框。

如果您设置border-collapse: collapse，表格标题似乎与表格主体不对齐（边框延伸太远的左右两侧有空间）。

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 10px 15px;
}

thead {
  /* background: #395870; */
  /* color: #fff;*/
  background: #f0f0f2
}

tbody tr:nth-child(even) {
  background: #f0f0f2
}

td {
  border-bottom: 1px solid #cecfd5;
  border-right: 1px solid #cecfd5;
}

table td:first-child {
  border-left: 1px solid #cecfd5;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>your page title goes here</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="test.css">
</head>

<body>
  <table>
    <caption>Design and Front-End Development Books</caption>
    <thead>
      <tr>
        <th scope="col" colspan="2">Item</th>
        <th scope="col">Qty</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Don't Make me Think by Steve Krug</td>
        <td>In Stock</td>
        <td>1</td>
        <td>$30.02</td>
      </tr>
    </tbody>
    <tr>
      <td>A Project Guide to UX Design by Russ Unger & Carolyn Chandler</td>
      <td>In Stock</td>
      <td>2</td>
      <td>$52.94 ($26.47 x 2)</td>
    </tr>
    <tr>
      <td>Introducing HTML5 by Bruce Lawson & Remy Sharp</td>
      <td>Out of Stock</td>
      <td>1</td>
      <td>$22.23</td>
    </tr>
    <tr>
      <td>Bulletproof Web Design by Dan Cederholm</td>
      <td>In Stock</td>
      <td>1</td>
      <td>$30.17</td>
    </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Subtotal</td>
        <td>$135.36</td>
      </tr>
      <tr>
        <td colspan="3">Tax</td>
        <td>$13.54</td>
      </tr>
      <tr>
        <td colspan="3">Total</td>
        <td>$148.90</td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

但是，如果您设置border-collapse: separate border-spacing: 0，那么它最终会正常工作，如下所示。

table {
  border-collapse: separate;
  border-spacing: 0;
}

th, 
td {
  padding: 10px 15px;
}
thead {
  /* background: #395870; */
  /* color: #fff;*/
  background: #f0f0f2
} 
tbody tr:nth-child(even) {
  background: #f0f0f2
}
td {
  border-bottom: 1px solid #cecfd5;
  border-right:1px solid #cecfd5;
}
table td:first-child {
  border-left: 1px solid #cecfd5;
}


/* The first td inside of each tr */

/* td:first-child {
  border-left: 1px solid #cecfd5;
} */

<!DOCTYPE html>
<html lang="en">
<head>
  <title>your page title goes here</title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="test.css">
</head>
<body>
  <table>
    <caption>Design and Front-End Development Books</caption>
    <thead>
      <tr>
        <th scope="col" colspan="2">Item</th>
        <th scope="col">Qty</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Don't Make me Think by Steve Krug</td>
        <td>In Stock</td>
        <td>1</td>
        <td>$30.02</td>
      </tr>
    </tbody>
      <tr>
        <td>A Project Guide to UX Design by Russ Unger & Carolyn Chandler</td>
        <td>In Stock</td>
        <td>2</td>
        <td>$52.94 ($26.47 x 2)</td>
      </tr>
      <tr>
        <td>Introducing HTML5 by Bruce Lawson & Remy Sharp</td>
        <td>Out of Stock</td>
        <td>1</td>
        <td>$22.23</td>
      </tr>
      <tr>
        <td>Bulletproof Web Design by Dan Cederholm</td>
        <td>In Stock</td>
        <td>1</td>
        <td>$30.17</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="3">Subtotal</td>
        <td>$135.36</td>
      </tr>
      <tr>
        <td colspan="3">Tax</td>
        <td>$13.54</td>
      </tr>
      <tr>
        <td colspan="3">Total</td>
        <td>$148.90</td>
      </tr>
    </tfoot>
  </table>
</body>
</html>

我不完全确定为什么会发生这种情况。如果有人能解释这是如何工作的，那就太好了。

【问题讨论】：

sn-ps中显示的效果吗？我看不出有什么不同。（并且不确定你在暗示什么。）编辑：我想我看到 LH 方面略有不同。 IDK diff b/t 崩溃和分离。

标签： html css html-table

【解决方案1】：

我看不出有什么不同。如果遇到任何变化，请使用border-color: 'black' 。

供参考：border-seperate Vs border-collapse`

【讨论】：