Space 在 HTML table 列中包含最长文本的行之后填充

Question

我有一个包含多列的 HTML table。

某列的最长文本可能位于 table 的中间某处。无论哪一行的文本最长，我都想在右边填充 5px，这样同一行下一列的文本就不会紧接着开始。

我想对 HTML table 中的每一列都执行此操作。

是否可以在 table 级别执行此操作而不是在每一行执行此操作？我怎样才能做到这一点？请帮忙！

样本table：

<!DOCTYPE html>
<html>
<body>
<table>
<tr><td>lengthy text</td><td>123</td><td>No</td></tr>
<tr><td>lengthiest text</td><td>123</td><td>No</td></tr>
<tr><td>lengthier text</td><td>123</td><td>No</td></tr>
</table>
</body>
</html>

Answer 1

据我所知，只对最长的行添加填充是不可能的；但是，您可以向所有 <td> 元素添加填充：

<html>
<head>
<style>
table tr td {
    padding-left: 5px;
    padding-right: 5px;
}
</style>
</head>
<body>
.... (your table code here)

或者，如果您知道第一行总是包含最长的文本，您可以只在此处添加填充：

<head>
<style>
table tr td:first-child {
    padding-left: 5px;
    padding-right: 5px;
}
</style>
</head>

有关详细信息，请参阅 CSS padding and CSS selectors 上的文档。

Answer 2

这项工作：

<style>
   table tr td{
    padding: 0px 05px 0px 05px;
   }
  </style>
  <table>
   <tr><td>lengthy text</td><td>123</td><td>No</td></tr>
   <tr><td>lengthiest text</td><td>123</td><td>No</td></tr>
   <tr><td>lengthier text</td><td>123</td><td>No</td></tr>
  </table>

Space 在 HTML table 列中包含最长文本的行之后填充

Space padding after the row containing the longest text in a HTML table column

html

html-table

cellpadding