在句子中内联 HTML 表格单元格

Question

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

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

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