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

问题描述

我正在阅读关于表格的 CSS教程，在其中一个示例中，作者创建了一个表格，该表格<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>

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

标签： htmlcsshtml-table

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

问题描述

解决方案

推荐阅读