Question

I have an HTML table with two columns. For the last row, I want the following to happen:

There will be one cell that spans two columns. (colspan = “2”) The width of this cell will not grow past the width of the table. Anytime text in that cell grows too large, I want it to span another row, but not increase the width of the table. The catch is, I want the width of the table to be fitted to be as large as it needs to be to contain the two columns without expanding to another row (excluding the last row).

EDIT: What I have that doesn’t work. The problem is that if “really long text” gets too long then it expands the other “text” messages instead of adding new rows.

<table>
<tr><td>text</td><td>text</td></tr>
<tr><td colspan="2">really long text</td></tr>
</table>

Answer 1

on your last row, wrap the content in a div and give it a width, like 100%, this way it wont increase the width of the table but just wrap around.

<td colspan="2">
  <div style="width:100%"> The content here</div>
</td>

Since you tagged this question html and css i have to tell you that if you want the content to dynamically create a new row, you will have to use javascript. It’s not possible without script, at least not that i know of.