CODEWITHSUNDEEP
htmlcss
WillHaack
WillHaack

Reputation: 596

HTML Table Format 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>

Upvotes: 1

Views: 425

Answers (2)

Radu M.
Radu M.

Reputation: 5748

You need to style you're TD with "word-wrap: break-word;" and set a max width for the table or TD.

<table><tbody>
  <tr>
    <td>text</td>
    <td>text</td>
  </tr>
  <tr>
    <td colspan="2" style="max-width:40px; word-wrap: break-word;">really long textsadfadfadfadfadfadsfadfadsfadfadsfasdfasdfasdfasdfasdfasdfasdfasdfa</td>
  </tr>
</tbody></table>

This will generate the table like this (without borders), the last rows just increases in height if the text is longer then it fits in width:

enter image description here

Upvotes: 2

Ibu
Ibu

Reputation: 43850

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.

Upvotes: 1

Related Questions