如何包裝長HTML表格單元格

我有一個兩行的表格。第二行由colspan =「2」中的長文本組成。如何包裝這個文本，使得表格不會比兩個第一行單元更寬？我無法爲表格設置固定寬度，因爲前兩個單元格是動態的。如何包裝長HTML表格單元格

<table> 
    <tr> 
     <td>Cell 1</td> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td colspan="2" style="width: 0" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td> 
    </tr> 
</table>

我錯誤地認爲，這將style="width: 0"該小區上工作。

來源

2013-07-10 aschoenebeck

您使用的是哪個版本的html？ –

當前瀏覽器中的HTML5。 – aschoenebeck

恐怕沒有直接的解決方案。您可以使用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>

來源

2013-07-10 12:53:18

哇簡單的解決方案完美地工作。更新小提琴在這裏：http://jsfiddle.net/qLpuq/2/ – aschoenebeck

這可能是有用的爲你..問題更新後

<table style="width:300px;" border="1"> 
     <tr> 
      <td>Cell 1</td> 
      <td>Cell 2</td> 
     </tr> 
     <tr> 
      <td colspan="2" style="width: 70%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td> 
     </tr> 
    </table>

更新

<table style="width:100%;" border="1"> 
     <tr> 
      <td style="width: 50%;">Cell 1</td> 
      <td style="width: 50%;">Cell 2</td> 
     </tr> 
     <tr> 
      <td colspan="2" style="width: 70%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td> 
     </tr> 
    </table>

來源

2013-07-10 08:38:01

謝謝，但我無法爲表格設置固定寬度，因爲前兩個單元格是動態的。更新了原始問題。 – aschoenebeck

我已經更新了naswer :) –

您只需要將

更改爲低至70％ –

使用最大寬度與colspan2的％

    <table style="width:100%;" border="1"> 
    <tr> 
     <td style="width: 50%;">Cell 1</td> 
     <td style="width: 50%;">Cell 2</td> 
    </tr> 
    <tr> 
     <td colspan="2" style="max-width: ??%;" >Very long cell that should just be as long as the first two cells and wrap, but not take all the screen width.</td> 
    </tr> 
</table>

來源

2013-07-10 12:50:48

相關問題

如何包裝長HTML表格單元格

回答

相關問題