Question

如何将第二行的td向右推？我知道我可以简单地添加一个空td但我想生成更清晰的标记。是否有任何css属性可以避免这种情况？

<style>
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>$100</td>
  </tr>

</table>

Answer 1

您可以使用伪元素执行此操作，例如，仅限CSS，不会更改标记

这里发生的是，当伪渲染它将呈现为匿名表格单元格时，因此以与<td></td>标记相同的方式将现有单元格向右推。

table, th, td {
  border: 1px solid black;
}
table tr:nth-child(3):before {
  content: '';
}

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>$100</td>
  </tr>
</table>

Answer 2

最好的方法是在$ 100单元格之前生成额外的<td></td>。如果您坚持不使用额外的<td></td>，请尝试<td colspan="2" style="text-align:right;">$100</td>

将td向右推，无需额外标记

2 个答案: