Question

也许我太挑剔了。我想在不修改每个td元素的情况下将单元格填充放在某些表中而不放在其他表中。我想使它符合html5，这意味着不使用表的cellpadding属性。但是我想要一些等同于cellpadding的东西 - 也就是我可以在逐个表的基础上应用于整个表的属性。

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

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>$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>

Answer 2

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

＆＃13;

table.table-big td {
  padding: 10px;
}

table.table-collapse {
border-collapse: collapse;  
}

table td {
  border: 1px solid #333;
}

＆＃13;

<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>

＆＃13;

单元格级别的

padding可用于在数据和边框之间创建间距桌面上的border-collapse可用于折叠或分隔边框。

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

仅在某些表中使用html5兼容的cellpadding而不编辑td元素

2 个答案: