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?
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.