html - 删除表中不必要的剩余空间

Question

如何去掉左边的空格，使文本保持右对齐？不需要的空间在图中被标记为红色。

fiddle :https://jsfiddle.net/ta2vzuta/

<table style="width: 100%">
  <tr>
    <td class="labels"> some text here </td>
    <td> input field </td>
    <td class="labels"> some text here </td>
    <td> input field </td>
  </tr>
  <tr>
    <td class="labels"> text </td>
    <td> input field here </td>
    <td class="labels"> text here </td>
    <td> input field </td>
  </tr>
</table>

编辑:<td class=labels> 是否有可能将调整为文本长度？这样就不需要设置固定长度了？

Answer 1

在表格单元格中，width 属性仅指定首选宽度。但是如果你使用默认的automatic table layout ，单元格将至少增长到内容所需的最小宽度。

所以你可以使用

.labels {
  width: 0;            /* As narrow as possible */
  white-space: nowrap; /* Without inserting line breaks */
}

.labels {
  text-align: right;
  font-weight: bold;
  width: 0;
  white-space: nowrap;
}

<table style="width: 100%">
  <tr>
    <td class="labels"> some text here </td>
    <td> input field </td>
    <td class="labels"> some text here </td>
    <td> input field </td>
  </tr>
  <tr>
    <td class="labels"> text </td>
    <td> input field here </td>
    <td class="labels"> text here </td>
    <td> input field </td>
  </tr>
</table>