This topic is locked
My table has 4 columns, so columns aren't THAT wide. I've got 1 column which will contain quite some text, so there will be multiple lines.
Problem is, that column can only hold 37 characters / line. Enough for most words, problematic with URLs or stuff that's just longer.
It will ignore my div's width and just expand the table causing it to "merge" with my other div of the 2nd column.
word-break: break-all. Solves the issue of the long words / URLs, but it also splits words which should just have started on the next line.
It did a good job of splitting the number, but 'economics' and 'bulls h i t' should've stayed in one piece.
And W3 says it word-break doesn't even work in FF.
Fixed table layout isn't really an option since I can't predict the size of columns 2 and 3.
And for those 2 columns I specifically want it to be on 1 line using white-space: nowrap;
Any suggestions are very welcome.
I guess you can work with:
<html>
<head>
<style>
.column{
width: 574px;
float: left;
}
#right {
border-left: solid 3px red;
}
table {
width: 100%;
border-collapse: collapse;
font-family: arial;
}
table td {
border-bottom: solid 1px;
}
</style>
</head>
<body>
<div id="left" class="column">
<table>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
<tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4 and some other little words which should stay in one piece.</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
</tr>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4data4 and some other little words which should stay in one piece.</td>
</tr>
</table>
</div>
<div id="right" class="column">
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
</body>
</html>
Answered
