在 HTML 表格列中包含最长文本的行之后的空格填充答案

【问题标题】：Space padding after the row containing the longest text in a HTML table column在 HTML 表格列中包含最长文本的行之后的空格填充
【发布时间】：2018-10-26 02:20:15
【问题描述】：

我有一个包含多列的 HTML 表格。

一列可能在表格中间的某处具有最长的文本。无论哪一行的文本最长，我想在右边添加一个 5px 的填充，这样同一行下一列的文本就不会立即开始。

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

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

示例表：

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

【问题讨论】：

标签： html html-table cellpadding

【解决方案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 和 CSS selectors 上的文档。

【讨论】：

【解决方案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>

【讨论】：