删除表格中不必要的剩余空间答案

【问题标题】：Remove unnecessary left space in table删除表格中不必要的剩余空间
【发布时间】：2016-03-31 18:11:18
【问题描述】：

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

<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> 是否可以调整为文本长度？这样就不用设置固定长度了吧？

【问题讨论】：

您正在使用并且它占用了自己的空间。您可以指定

是的，但我想用这个 <table> 宽度 = 100%

根据你的文字设置宽度：

是的，这是一个可能的解决方案。但是如果文本长度 > 100px 怎么办？是否可以将表格宽度调整为文本长度？

您也可以在“%”中给出宽度...它会根据表格进行调整。但它会在左边添加空间.. 最好去宽度“px”并根据文本调整大小

的宽度。像这样

这里有一些文字

标签： html css html-table

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

【讨论】：

【解决方案2】：

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

【讨论】：