2016-09-07 30 views
0

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

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

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

+0

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

+0

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

+0

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

回答

3

在表格單元格上使用min-widthmax-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>

+0

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

0

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

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