删除表中不必要的左侧空格

Question

如何摆脱左侧空间以使文字保持右对齐？不必要的空间在图片中标记为红色。

小提琴：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 */
}

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

在width:50%和td width:auto上使用.label的组合 像这样： https://jsfiddle.net/grassog/udhwh388/2/