带固定宽度列的表格 - 不指定表格宽度

我正在寻找一种使用固定宽度单元格创建表格的方法。当窗口太窄时，应该出现水平滚动条。带固定宽度列的表格 - 不指定表格宽度

在我的例子中，有两个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

带固定宽度列的表格 - 不指定表格宽度

回答

相关问题