CODEWITHSUNDEEP
htmlcsshtml-table
Pim
Pim

Reputation: 135

Inlining HTML table cells in sentence

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>

Upvotes: 3

Views: 39

Answers (1)

Aaron Sarnat
Aaron Sarnat

Reputation: 1235

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>

Upvotes: 2

Related Questions