Inlining HTML table cells in sentence

user_9198145 0
Viewed 34

Is there a way to have HTML table cells inlined in the normal text flow with the text using CSS to make the text appear at the baseline of the surrounding text?

Simply making all table elements inline make the text shifted downwards as seen in the following example, which is undesirable.

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>

html-table css html
1 Answers

To achieve what you're trying to do, you should add vertical-align: baseline; to each of the table elements in question.

Also, you don't need to target each of the elements with the hierarchy of ancestors. This should suffice:

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>

user_32431870
Related