Как определяется фактическая ширина столбцов в таблице? Ниже приведенный ниже код (в Chrome) выглядит следующим образом:
Моя проблема заключается в том, что добавление в ячейку большего количества символов с помощью "ddd..." свободное пространство не используется, но содержимое других ячеек обернуто. Иногда возникает проблема, заключающаяся в том, что тексты "aaa..." и "ccc..." не будут перекрываться. Общий размер таблицы фиксирован, но все содержимое динамическое, поэтому фиксированный макет не является предпочтительным.
Обновление: несмотря на то, что текст меньше текста, чем любой из фактических столбцов, первая строка (c1-c4) имеет весьма существенный (возможный) эффект для окончательной компоновки.
<!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>