如何确定表中列的实际宽度?下面的代码(在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> …Run Code Online (Sandbox Code Playgroud)