JSFiddle - React, Tailwind, and code Playground

by brandonzylstra

HTML

<table>
        <tr><td>0</td><td>blah</td><td>blah</td><td>blah</td></tr>
    <tr class="notes"><td>1</td><td>blah</td><td>blah</td><td>blah</td><td class="note">this is should appear to be in its own row, even though it's really on the row above. It's important that if I put lots of text into this it will expand naturally just as if it were on its own in a normal (separate) table row.</td><td class="note">There can even be multiple note cells, and they appear below the normal columnar data as though in their own rows.  The zebra-striping helps make it obvious which data they belong to.</td></tr>
    <tr><td>2</td><td>blah</td><td>blah</td><td>blah</td><td class="note">this should appear in its own row....</td></tr>
    <tr><td>3</td><td>blah</td><td>blah</td><td>blah</td><td class="note">this should appear in its own row....</td></tr>
    <tr><td>4</td><td>blah</td><td>blah</td><td>blah</td><td class="note">this should appear in its own row....</td></tr>
    <tr><td>5</td><td>blah</td><td>blah</td><td>blah</td><td class="note">this should appear in its own row....</td></tr>
</table>

CSS

body { margin: 0; padding: 0; }
table { display:block; width: 100%; }
td.note  {
    float: left;
    width: 99%;
    background-color: inherit;
    
}
td {
    float: left;
    border: solid 1px #ccc;
    padding: 0 2px;
}
tr:nth-child(even) {
    background-color: #efefef;
}