列宽超过容器宽度的表格

当我在固定宽度容器内放置一个表格并且列宽度之和超过容器宽度时，通常我会观察表格不会溢出容器，但是列会比它们的样式宽度更窄。列宽超过容器宽度的表格

但我也观察到一些表确实溢出的情况。这尤其让我为难，如下所示（或在此Fiddle）一种情况：

<div style="width:750px;border:1px solid black"> 
    <table> 
     <tr> 
      <td> 
       <table> 
        <tr> 
         <td colspan="2"> 
          <input style="width: 210px;"> 
         </td> 
        </tr> 
        <tr> 
         <td style="width: 200px"></td> 
         <td><input style="width: 200px;"></td> 
        </tr> 
       </table> 
      </td> 
      <td> 
       <input style="width:400px"> 
      </td> 
     </tr> 
    </table> 
</div>

在Chrome浏览器（40.0），列宽被保留，表溢出。在IE和FF中，表格适合容器，列缩短。将表格“挤”成容器是否有一个通用规则？ Chrome是越野车吗？或者这种令人费解的桌子设计是否超出规范？

来源

2015-02-10 zumbo

要发生的是什么？ – winresh24 2015-02-10 08:31:24

你正在设置所有东西的宽度后的宽度..为什么这会是一个铬错误 – 2015-02-10 08:35:06

表格布局并没有严格规定，浏览器有一些自由选择如何在不同情况下渲染。使用'table-layout：fixed'格式化表格通常可以帮助您更好地控制呈现内容的方式，特别是当表格单元格已经给出宽度时。 – CBroe 2015-02-10 08:48:04

您可以输入的那些宽度设置为max-width:100%和width:100% 看看这个https://jsfiddle.net/ky2okqy5/6/

修订https://jsfiddle.net/ky2okqy5/7/

来源

2015-02-10 08:33:18 winresh24

您的版本不会溢出，但列（和整个表格）变得更短。我想实现的是让列占用尽可能多的空间（我的示例在IE和FF中显示的方式）。 – zumbo 2015-02-10 09:01:09

看看我更新了jsfiddle – winresh24 2015-02-10 09:15:25

现在看起来（几乎）在IE和Chrome中相同，但空的元素（在您的示例中使用max-width：300px样式）被压扁到4px。当我增加宽度：100％时，它旁边的单元格被压扁。 – zumbo 2015-02-10 10:08:24

列宽超过容器宽度的表格

回答

相关问题