在表中排列标题和数据(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: separateborder-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>

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

我看不出有什么区别。使用border-color: 'black'查看任何更改，如果您遇到。

参考:border- separated Vs border-collapse '

相关内容

最新更新

热门标签：