3

可能是我太挑剔了。我想将单元格填充放在某些表格中，而不是其他表格中，而不编辑每个 td 元素。我想让它符合 html5 标准，这意味着不使用表格的 cellpadding 属性。但我想要与 cellpadding 等价的东西——即我可以逐个表格地将其应用于整个表格的属性。

为了让它更复杂，我想要折叠边框，我认为这排除了使用单元格间距属性。我可以在那里做一些棘手的事情吗？

4

2 回答 2

0 
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 1px solid black;
}
.cell-pad th,.cell-pad td{padding:10px}
</style>
</head>

<body>
<p>Table without cellpadding:</p>
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with cellpadding:</p>
<table cellpadding="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

<p>Table with css:</p>
<table class="cell-pad">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

</body>
</html>
于 2016-09-20T12:05:31.820 回答
0

您可以使用 CSS 解决这些问题。

table.table-big td {
  padding: 10px;
}

table.table-collapse {
border-collapse: collapse;  
}

table td {
  border: 1px solid #333;
}
<table class="table-big table-collapse">
  <tr>
    <td>foo</td>
    <td>bar</td>
  </tr>
</table>

<table>
  <tr>
    <td>Hello</td>
    <td>World</td>
  </tr>
</table>

padding在单元格级别上可用于创建数据和边框之间的间距。
border-collapse在桌子上可用于折叠或分离边框。

您可以使用这些样式创建类，这样您就可以直接控制哪个表获得哪种样式。在我的示例中，第二个表没有得到任何样式。

于 2016-09-20T12:10:05.740 回答