HTML table row with extra full-width column

Issue

I have an HTML table with many rows and several columns. I want to append a td to some of these rows such that the td would look like a new row and span the entire width of the table. This is useful to keep all of the data for a single table row under the same tr tag and would allow me to show extra data that relates to that same row but that won't fit in a single table column, like long-form notes. For example:

<table>
  <thead>
    <th>Col 1</th>
    <th>Col 2</th>
    <th>Col 3</th>
  </thead>
  <tbody>
    <tr>
      <td>First</td>
      <td>Second</td>
      <td>Third</td>
      <td class="magic" colspan="3">
        This is long-form data that should look like a full-width
        row without creating an extra tr tag to hold it.
      </td>
    </tr>
  </tbody>
</table>

Note that the same table also uses jquery-ui's sortable api to allow the rows to be drag/dropped in order to sort them. Also, the end result is then printed.

How do I do this without messing up my markup with illegal divs or abandoning html tables altogether?

Solution

You can use CSS flexbox property to achieve what you are trying, use a class selector for the specific row you want to span the width.

Flexbox has a property flex-direction which let's define the flow of the children of a component to either column or row

Example: Link to a codepen demo

PS: I have not tested it on a jQuery UI.

Answered By - Justmesam