Forgive me if this question seems basic, but I'm not very familiar with CSS.
I have a table with two columns that need to be equally sized and responsive when the page is resized.
The header isn't an issue since it only contains a few words in each cell. However, the cells below contain large bodies of text that must not wrap.
Here's what I've tried:
<style>
.contentDiv
{
display: inline-block;
overflow-x:auto;
overflow-y:hidden;
white-space: nowrap;
white-space: nowrap;
}
</style>
<table style="width:100%">
<th>
<tr><td with="50%">head 1</td><td width="50%">head 2</td></tr>
</th>
<tbody>
<tr>
<td><div class="contentDiv">big-text-here</div></td>
<td><div class="contentDiv">big-text-here</div></td>
</tr>
</tbody>
</table>I want the table to take up the full width, each content cell to occupy half of the table's width, and any text within the cells not to disrupt the layout (scrollbars should appear for oversized content). Thank you!