How to align ordered list item table to number?

user_3399782 0
Viewed 207

I have an ordered list of tables that contain 1 row and 2 columns using the code below.

I am trying to get the first line of the table paragraph to align to the number similar to normal list items. For some reason it is not aligning and the number is showing at the bottom.

How can I 1. align the table row paragraphs to the number similar to the first item and 2. align the "56 citations" paragraph to the other td in the table.

Thanks!

<ol>
  <li>
    <p>This is what a normal item</p>
    <p>looks</p>
    <p>like</p>
  </li>
  <li>
    <table>
      <tr>
        <td>
          <p>This is what a table item</p>
          <p>looks</p>
          <p>like</p>
        </td>
        <td>
          <p>56 Citations</p>
        </td>
      </tr>
      </table>
  </li>
</ol>

The rending of the html in Firefox

html-lists html-table css html
1 Answers

Use vertical-align: baseline in the td element, like this:

td {
  vertical-align: baseline;
}
<ol>
  <li>
    <p>This is what a normal item</p>
    <p>looks</p>
    <p>like</p>
  </li>
  <li>
    <table>
      <tr>
        <td>
          <p>This is what a table item</p>
          <p>looks</p>
          <p>like</p>
        </td>
        <td>
          <p>56 Citations</p>
        </td>
      </tr>
    </table>
  </li>
</ol>

user_68850080
Related