HTML table: Wrap multiple rows to new line - html

Question

I am using HTML and CSS to display sentences aligned with word-by-word IPA transcriptions:
<table>
<tr class="eng">
<td>This </td>
<td>is</td>
<td>an</td>
<td>example</td>
<td>sentence.</td>
</tr>
<tr class="ipa">
<td>ðɪs</td>
<td>ɪz</td>
<td>ən</td>
<td>ɪɡˈzæmpl̩</td>
<td>ˈsɛntəns</td>
</tr>
</table>
tr.eng {
font-weight: bold;
}
tr.ipa {
font-style: italic;
}
td {
white-space: nowrap;
text-align: center;
}
.eng td:first-child {
text-align: left;
}
.eng td:last-child {
text-align: right;
}
http://jsfiddle.net/2ab9pgmd/
If a sentence is too long for the screen, I would like both rows to wrap to a new line, so that it could look like following hard-coded example:
<table>
<tr class="eng">
<td>This </td>
<td>is</td>
<td>an</td>
<td>example</td>
</tr>
<tr class="ipa">
<td>ðɪs</td>
<td>ɪz</td>
<td>ən</td>
<td>ɪɡˈzæmpl̩</td>
</tr>
</table>
<table>
<tr class="eng">
<td>sentence.</td>
</tr>
<tr class="ipa">
<td>ˈsɛntəns</td>
</tr>
</table>
Is it possible to set up an HTML table to wrap multiple rows to new lines dynamically depending on the screen size, rather than manually defining the line lengths in advance?
I found a similar example of what I would like to do here, but this solution does not keep the columns aligned for tables with more than one row.
If possible, I would rather not use JavaScript so the text can be viewed as an eBook.

Answer 1

I prefer you go with the CSS Grid cause when you use table row for wrapping it wont get wrapped up and wont provide you the desired output . You can add wrapping rules but I don't think it will work.