Question

我要求在表格单元格中显示图标，文本和其他图标。为了创造这个，我在td内建立跨度。像这样：

<table>
  <tr>
    <td>
      <span>ICON 1</span>
      <span>Some Value</span>
      <span>ICON 2</span>
    <td>
  </tr>
  <tr>
    <td>
      <span>ICON 3</span>
      <span>Some big big value</span>
      <span>ICON 4</span>
    <td>
  </tr>
</table>

这种方法的问题是跨距没有正确对齐。图标的大小始终相同，但中间跨度（文本）的长度会有所不同。对于例如上面的代码将显示为：

但是，我想要的是：

图标和文字都必须是单个单元格的一部分。为文本和图标创建不同的列将为我打破其他内容。

有关如何做到这一点的任何建议？

更新如何才能使文本右对齐？

Answer 1

您的// Convert Date Object to Milliseconds (value coming from the user) ngModel.$parsers.push(function(val) { return isNaN(val) ? undefined : val.valueOf(); }); // Convert milliseconds to Date Object (going to the user) ngModel.$formatters.push(function(val) { return isNaN(val) ? undefined : new Date(val); });遗失了。

您可以查看td。（假设图标尺寸相同）

＆＃13;

float

＆＃13;

td span {
  float:left;
  margin:0.25em;
}
td span:last-of-type {
  float:right;
}

＆＃13;

在中跨N上对齐

＆＃13;

<table>
  <tr>
    <td>
      <span>ICON 1</span>
      <span>Some Value</span>
      <span>ICON 2</span>
    </td>
  </tr>
  <tr>
    <td>
      <span>ICON 3</span>
      <span>Some big big value</span>
      <span>ICON 4</span>
    </td>
  </tr>
</table>

＆＃13;

tr {
  display:table;
  width:100%;
  white-space:nowrap;
  }
td {
  display:table-row;
  }
td span {
  display:table-cell;
  padding:0.25em;
}
td span:nth-child(2) {
  text-align:right;
  width:100%;
  
}

＆＃13;

Answer 2

你可以这样做

.table {
  display: table;
}

.row {
  display: table-row;
}

span {
  display: table-cell;
  padding: 0 5px;
}

<div class="table">
  <div class="row">
    <span>ICON 1</span>
    <span>Some Value</span>
    <span>ICON 2</span>
  </div>
  <div class="row">
    <span>ICON 1</span>
    <span>Some Value lorem ipsum</span>
    <span>ICON 2</span>
  </div>
</div>

Answer 3

您缺少 td 标记。

这会在表格中设置列，不需要CSS。

https://jsfiddle.net/Lnynfv9t/

<table>
  <tr>
    <td>ICON 1</td>
    <td>Some Value</td>
    <td>ICON 2</td>
  </tr>
  <tr>
    <td>ICON 3</td>
    <td>Some big big value</td>
    <td>ICON 4</td>
  </tr>
</table>

Answer 4

我假设你忘了把你的跨度包在表格列中。

无论如何，在CSS中设置你的跨度显示：block。然后给出所有相同的宽度，像素或百分比。为一个图标添加背景图像并将其设置为左上角。将另一个图标作为背景图像添加到右上角，并在跨度的左侧放置填充，使文本位于图标的右侧。

如何将表格单元格中的跨距与其下方单元格中的跨距对齐？

4 个答案: