How is the actual width of columns in table determined?
The code below looks (in Chrome) like this:
My problem is that adding any more characters to the cell with "ddd..." the free space is not used, but the content of other cells gets wrapped. Sometime the problem is that texts "aaa..." and "ccc..." would not overlap. The total size of the table is fixed, but all the content is dynamic, so a fixed layout is not preferred.
Update: Despite containing less text than any of the actual columns the first row (c1-c4) has quite significant (possitive) effect on the final layout.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {background:#000; color:#fff; font-family:'Tahoma'; font-weight:600; }
.container {width:670px; }
table {font-family:'Tahoma'; font-weight:600; border-color: #ffffff; border-width:1px; }
.detail table{margin-left:20px; font-size:24px; width:650px;}
.detail table .operational {text-align:right;}
</style>
</head>
<body>
<div class="detail">
<table border="1px" cellpadding="0px" cellspacing="0px" >
<tbody>
<!-- first row and borders only for debuging-->
<tr>
<td >c1</td>
<td >c2</td>
<td >c3</td>
<td >c4</td>
</tr>
<tr >
<td class="caption">Date</td>
<td class="value">17.6.2013</td>
<td class="operational" colspan="2">aaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>
<tr >
<td class="caption">bbbbbbbb</td>
<td class="value" colspan="2">ccccccccccccccc ccc</td>
<td class="operational">dddddddddddddd</td>
</tr>
<tr >
<td class="caption">bbbbbb bbb</td>
<td class="value" colspan="3">eeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
</tr>
<tr >
<td class="caption">bbb bbbbbb</td>
<td class="value" colspan="3">xxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx</td>
</tr>
</tbody>
</table>
</div>
</body></html>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
