я боюсь нет прямого решения. Вы можете играть с JavaScript, создавая копию таблицы, содержащей только первую строку, получите ее ширину, отбросьте копию и используйте ширину, чтобы установить ширину вашей реальной таблицы. В сочетании с настройкой table-layout: fixed это должно справиться с ситуацией. Вы можете упростить подход, чтобы не создавать копию таблицы, а вместо этого удалять вторую строку, а затем добавлять ее обратно. Это становится довольно некрасиво:
<!doctype html>
<title>Hack</title>
<style>
table { table-layout: fixed }
tr:first-child td { white-space: nowrap }
</style>
<table id=tbl>
<tbody id=tbody>
<tr>
<td id=cell1>Cell 1</td>
<td id=cell2>Cell 2</td>
</tr>
<tr id=row2><td colspan=2>
Very long cell that should just be as long as the first two cells and
wrap, but not take all the screen width.
</table>
<script>
var tbl = document.getElementById('tbl');
var tbody = document.getElementById('tbody');
var row2 = document.getElementById('row2');
var cell1 = document.getElementById('cell1');
var cell2 = document.getElementById('cell2');
tbody.removeChild(row2);
var width = tbl.clientWidth;
var width1 = cell1.clientWidth;
var width2 = cell2.clientWidth;
tbody.appendChild(row2);
cell1.style.width = width1 + 'px';
cell2.style.width = width2 + 'px';
tbl.style.width = width + 'px';
</script>
Совсем другая идея заключается в том, чтобы использовать обходной путь, где длинный текст не находится в клетке, но в caption элемент, размещенный в нижней части таблицы:
<table>
<caption align=bottom style="text-align: left">
Very long cell that should just be as long as the first two cells and
wrap, but not take all the screen width.
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
какую версию html вы используете? –
HTML5 в современных браузерах. – aschoenebeck