寬度上的表格單元格有固定表格佈局不工作

我有這樣的代碼：寬度上的表格單元格有固定表格佈局不工作

table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    width: 120px; 
 
    border: 1px solid black; 
 
} 
 
div { 
 
    overflow: scroll; 
 
    width: 300px; 
 
}

<div> 
 
<table> 
 
    <tr> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
    <th>D</th> 
 
    <th>E</th> 
 
    </tr> 
 
    <tr> 
 
    <td>F</td> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    <td>I</td> 
 
    <td>J</td> 
 
    </tr> 
 
</table> 
 
</div>

爲什麼細胞不具備的120像素寬度？我希望表格的寬度大於div的寬度，這樣我就可以滾動div了。

來源

2017-05-25 jcubic

用這個改變你的代碼。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table { 
 
    table-layout: fixed; 
 
    border-collapse: collapse; 
 
} 
 
table, th, td { 
 
    width: 120px; 
 
    border: 1px solid black; 
 
} 
 
div { 
 
    overflow: scroll; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div> 
 
<table> 
 
    <tr> 
 
    <th>A</th> 
 
    <th>B</th> 
 
    <th>C</th> 
 
    <th>D</th> 
 
    <th>E</th> 
 
    </tr> 
 
    <tr> 
 
    <td>F</td> 
 
    <td>G</td> 
 
    <td>H</td> 
 
    <td>I</td> 
 
    <td>J</td> 
 
    </tr> 
 
</table> 
 
</div> 
 

 

 
</body> 
 
</html>

來源

2017-05-25 11:00:33

所以你只需要表中的寬度設置爲以像素爲單位的任何值（小那麼結果寬度）？ – jcubic

如果你想要一個表格在div內滾動，那麼表格的寬度應該更大。 –

將表格寬度設置爲600，將div設置爲300聽起來更合乎邏輯並且也適用。 – Gerard

寬度上的表格單元格有固定表格佈局不工作

回答

相關問題