html5 仅在不编辑 td 元素的情况下在某些表格中使用兼容的 cellpadding

Question

可能是我太挑剔了。我想在某些 table 中放置单元格填充，而不是其他元素，而不编辑每个 td 元素。我想让它 html5 兼容，这意味着不使用 table 的 cellpadding 属性。但我想要等同于 cellpadding 的东西 - 即我可以在 table 乘以 table 的基础上应用于整个 table 的属性。

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

Answer 1

<!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>0</td>
  </tr>
</table>

<p>Table with cellpadding:</p>
<table cellpadding="10">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>0</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>0</td>
  </tr>
</table>

</body>
</html>

Answer 2

您可以使用 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 在单元格级别可用于在数据和边框之间创建间距。
table 上的 border-collapse 可用于折叠或分隔边框。

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

html5 仅在不编辑 td 元素的情况下在某些表格中使用兼容的 cellpadding

html5 compliant cellpadding in only some tables without editing td elements

html

html-table

cellpadding