帶固定寬度列的表格 - 不指定表格寬度

我正在尋找一種使用固定寬度單元格創建表格的方法。當窗口太窄時，應該出現水平滾動條。帶固定寬度列的表格 - 不指定表格寬度

在我的例子中，有兩個400px的列，因此表應該是800px寬。當屏幕寬度小於800像素時，將出現水平滾動條。這是我正在尋找的確切行爲： http://jsbin.com/xeniwovole/edit?html,css,output

現在問題：可以在沒有指定表格寬度的情況下完成嗎？在現實生活中，表格將具有動態數量的列和列寬度。因此，試圖將表格寬度計算爲列寬度的總和是不合理的。

來源

2016-09-07 user1702401

在'percentage's我猜指定寬度...看看是否適合你，不是內容... – kukkuz

對不起！水平滾動條當然 - 將修復原始帖子。 – user1702401

@kukkuz - 無法想象任何幫助百分比 – user1702401

在表格單元格上使用min-width和max-width而不是width。這將阻止表格調整<td>的大小以適應100％寬度的表格，這是它的默認行爲。

#wrap { 
 
    overflow-x: auto; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
    width: auto; 
 
} 
 

 
td { 
 
    background-color: yellow; 
 
    min-width: 400px; 
 
    max-width: 400px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div id="wrap"> 
 
    <table> 
 
    <tr> 
 
     <td>First</td> 
 
     <td>Second</td> 
 
    </tr> 
 
    </table> 
 
</div> 
 
</body> 
 
</html>

來源

2016-09-07 14:31:52 DBS

謝謝！這是正確的解決方案 - 我不知道在這種情況下寬度與最小寬度的行爲。 – user1702401

嘗試使用表格的佈局：固定; 水平佈局僅取決於表格的寬度和列的寬度，使細胞

table { 
    table-layout: fixed; 
    width: 100%; /* width property required */ 
}

來源

2016-09-07 14:34:27

帶固定寬度列的表格 - 不指定表格寬度

回答

相關問題