如何在HTML表格中的列之间平均分配空格？

Question

我有一个HTML表格，其固定宽度为1000像素（比如说），远远大于容纳表格中文本所需的宽度。它看起来像：

＆＃34;薪水＆＃34;列具有右对齐文本，而其他列具有左对齐文本。 （我已经添加了粉红色和绿色背景，以便您可以看到它是如何布局的。它不是实际表格的一部分。）

如何让它在列之间放置相等的空格？换句话说，在以下屏幕截图中：

我添加了两个绿色矩形来说明列之间的空白（更确切地说，在一列中的最后一个可见像素与下一列中的第一个可见像素之间）。我希望这两个绿色矩形具有相同的宽度。我怎么做？它甚至可以在HTML中使用吗？

请注意，文字是动态的 - 我们不会提前知道每个栏目中会出现哪些文字，或者文字的宽度。

这是我使用的代码：

＆＃13;

＆＃13;

<table style="width:1000px;">
  <tr>
    <th style="text-align:left; background-color:#FFFFFF">Name</th>
    <th style="text-align:right;">Salary</th>
    <th style="text-align:left; background-color:#FFFFFF">Title</th>
  </tr>
  <tr>
    <td style="text-align:left; background-color:#FFFFFF">Kartick</td>
    <td style="text-align:right;">10</td>
    <td style="text-align:left; background-color:#FFFFFF">Director of Nothing</td>
  </tr>
  <tr>
    <td style="text-align:left; background-color:#FFFFFF">Neha</td>
    <td style="text-align:right;">200</td>
    <td style="text-align:left; background-color:#FFFFFF">Minister of Awesome</td>
  </tr>
  <tr>
    <td style="text-align:left; background-color:#FFFFFF">Vijay</td>
    <td style="text-align:right;">3000</td>
    <td style="text-align:left; background-color:#FFFFFF">VP of Buzzwords</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

PS：请忽略内联样式的使用。这是一次性代码。

Answer 1

有两种方法可以做到这一点。您可以将固定宽度应用于td元素，但这需要您知道有多少列。

第二种方法是将table-layout: fixed应用于table元素。

http://codepen.io/alexmccabe/pen/gbzgNQ

要获得相等的空格，您必须在前两列上设置显式宽度，并在最后一列上设置padding-left。

http://codepen.io/alexmccabe/pen/ByxpXb

Answer 2

请尝试以下操作： Updated Demo

<强> CSS：

th, td{
    width:333px; /* specify in px or % as per your requirement */
}

<强> HTML：

<table> <!-- removed Width from table tag -->
<tr>
<th style="text-align:left; ">Name</th>
<th style="text-align:right;">Salary</th>
<th style="text-align:left;">Title</th>
</tr>
<tr>
<td style="text-align:left; ">Kartick</td>
<td style="text-align:right;">10</td>
<td style="text-align:left; ">Director of Nothing</td>
</tr>
<tr>
<td style="text-align:left; ">Neha</td>
<td style="text-align:right;">200</td>
<td style="text-align:left; ">Minister of Awesome</td>
</tr>
<tr>
<td style="text-align:left; ">Vijay</td>
<td style="text-align:right;">3000</td>
<td style="text-align:left; ">VP of Buzzwords</td>
</tr>
</table>