在句子中内联 HTML table 个单元格

Question

有没有办法让 HTML table 单元格与使用 CSS 的文本在正常文本流中内联，使文本出现在周围文本的基线处？

简单地使所有 table 元素内联会使文本向下移动，如下例所示，这是不可取的。

table,
table > tbody,
table > tbody > tr,
table > tbody > tr > td {
    display: inline;
}

table > tbody > tr > td {
     padding: 0px;
     margin: 0px;
}

<div style="width: 40em;">
  A table containing
  <table>
    <tbody>
      <tr>
        <td>possibly multiple cells</td>
      </tr>
      <tr>
        <td>containing potentially a high amount of text that should not be shifted down</td>
      </tr>
    <tbody>
  </table>
  below the baseline.
</div>

Answer 1

要实现您的目标，您应该将 vertical-align: baseline; 添加到每个有问题的 table 元素。

另外，您不需要使用祖先层次结构来定位每个元素。这应该足够了：

table,
tbody,
tr,
td {
    display: inline;
    padding: 0;
    vertical-align: baseline;
}

<div style="width: 40em;">
  A table containing
  <table>
    <tbody>
      <tr>
        <td>possibly multiple cells</td>
      </tr>
      <tr>
        <td>containing potentially a high amount of text that should not be shifted down</td>
      </tr>
    <tbody>
  </table>
  below the baseline.
</div>

在句子中内联 HTML table 个单元格

Inlining HTML table cells in sentence

html

css

html-table