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

时间:2016-03-31 09:21:34

标签: html css html-table

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

小提琴: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>

text example

编辑<td class=labels>是否可能会调整为文字长度?这样你就不需要设定固定的长度了吗?

2 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

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