具有固定布局问题的 Internet Explorer 7 表答案

【问题标题】：Internet Explorer 7 table with fixed layout problem具有固定布局问题的 Internet Explorer 7 表
【发布时间】：2011-09-11 11:15:05
【问题描述】：

所以我有一个包含许多列和固定布局的表格。表格的第一列是 100px 宽，其他都是 6px 宽。它在 Mozilla Firefox、Internet Explorer 8 和 9 中正确显示。但在 IE7 中，第一列中的文本几乎在每个单词之后都换行（即使该列的宽度足以让整个文本在一行上）并且该列大约是比预期宽 2-3 倍。

jsfiddle：http://jsfiddle.net/YvNy5/

将此代码复制并粘贴到 index.html 并在 Internet Explorer 7 和 8/9 中进行测试并进行比较以查看差异：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="sk">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="Content-Language" content="sk" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<title>Test 2</title>

<style type="text/css">
#CalendarReservationsBody table.CalendarReservationsBodyTable, #CalendarHolidaysBody table.CalendarHolidaysBodyTable{
    width: 100%;
    border-spacing: 0px;
    border-collapse: collapse;
    background: #F9F5D7;
    border: 1px solid #000;
    table-layout: fixed;
}
#CalendarHolidaysBody table.CalendarHolidaysBodyTable{
    margin-top: 1em;
    width: 100%;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable th, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th{
    text-align: left;
    font-weight: normal;
    padding: 0.1em 0.5em;
    border: 1px solid #000;
    width: 6px;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.borderLeft, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td.borderLeft{
    border-left: 1px solid #000;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    border: 0px;
    border-bottom: 1px solid #000;
    padding: 0.1em 0.5em;
    width: 6px;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.wideRow, #CalendarReservationsBody table.CalendarReservationsBodyTable th.wideRow
,#CalendarHolidaysBody table.CalendarHolidaysBodyTable td.wideRow, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.wideRow{
    width: 100px;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable thead th, #CalendarHolidaysBody table.CalendarHolidaysBodyTable thead th{
    text-align: center;
    font-weight: bold;
    background-color: #6FA7D1;
    color: #FFF;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable th.corner, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.corner{
    text-align: left;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.highlighted, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td.highlighted{
    background: #FFB856;
    text-align: center;
}
#CalendarReservationsBody table.CalendarReservationsBodyTable td.highlighted:hover, #CalendarHolidaysBody table.CalendarHolidaysBodyTable td.highlighted:hover{
    background: #FF9000;
}
/* specialne pre tabulku - dovolenky */
#CalendarHolidaysBody table.CalendarHolidaysBodyTable th{
    width: 24px;
    padding: 0.1em 0;
}
#CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    width: 1px;
    padding: 0.1em 0;
}
</style>

</head>
<body>

<div id="CalendarReservationsBody">

<table class="CalendarReservationsBodyTable">
    <thead>     <tr>
            <th class="corner wideRow">Auto</th>            <th class="odd" colspan="4">0</th>          <th class="" colspan="4">1</th>         <th class="odd" colspan="4">2</th>          <th class="" colspan="4">3</th>         <th class="odd" colspan="4">4</th>          <th class="" colspan="4">5</th>         <th class="odd" colspan="4">6</th>          <th class="" colspan="4">7</th>         <th class="odd" colspan="4">8</th>          <th class="" colspan="4">9</th>         <th class="odd" colspan="4">10</th>         <th class="" colspan="4">11</th>            <th class="odd" colspan="4">12</th>         <th class="" colspan="4">13</th>            <th class="odd" colspan="4">14</th>         <th class="" colspan="4">15</th>            <th class="odd" colspan="4">16</th>         <th class="" colspan="4">17</th>            <th class="odd" colspan="4">18</th>         <th class="" colspan="4">19</th>            <th class="odd" colspan="4">20</th>         <th class="" colspan="4">21</th>            <th class="odd" colspan="4">22</th>         <th class="" colspan="4">23</th>        </tr>
    </thead>    <tbody>     <tr>
            <td class="alignRight wideRow">KE-260 FC - Octavia combi</td><td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td colspan="16" class="highlighted borderLeft" title="Richard Knop">
    Richard Knop
</td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td colspan="14" class="highlighted" title="Richard Knop">
    Richard Knop
</td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
        </tr>   </tbody>
</table>

</div>

</body>
</html>

我想这种风格需要一些调整：

#CalendarReservationsBody table.CalendarReservationsBodyTable td.wideRow, #CalendarReservationsBody table.CalendarReservationsBodyTable th.wideRow
,#CalendarHolidaysBody table.CalendarHolidaysBodyTable td.wideRow, #CalendarHolidaysBody table.CalendarHolidaysBodyTable th.wideRow{
    width: 100px;
}

【问题讨论】：

这必须在表格中吗？我似乎也想不通
@Liam 是的，它必须在表格中。它适用于除 Internet Explorer 7 以外的所有浏览器，我讨厌那个浏览器。
我不知道一个选项有多可行，但如果你使用百分位数而不是宽行上的 px 宽度，它似乎可以工作...jsfiddle.net/YvNy5/11
好吧，我宁愿有一个固定的宽度。如果这个错误没有解决方案，我将不得不使用相对宽度。我再等一会儿，也许有人会有解决这个问题的想法。

标签： html css internet-explorer xhtml

【解决方案1】：

您应该删除 td 上的宽度，因为它们是在 th 上定义的

#CalendarReservationsBody table.CalendarReservationsBodyTable td, 
#CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    border: 0px;
    border-bottom: 1px solid #000;
    padding: 0.1em 0.5em;
    /* width: 6px; */
}

#CalendarHolidaysBody table.CalendarHolidaysBodyTable td{
    /* width: 1px; */
    padding: 0.1em 0;
}

【讨论】：

【解决方案2】：

根据我的回答：Table with table-layout: fixed; and how to make one column wider

我确实说过col elements 也是一种控制其他列宽度的方法..

您的表格非常精确，1 x 100px 宽的列 +（24 组 4 个）= 96 x 6px 的总和，不包括用于舍入或边框的浏览器变化是 676px .. 您还在 @ 中进行了填充987654325@'s - 但是您已将表格设置为 100% 宽，以便浏览器知道您的哪些列要扩展，以及当表格宽度大于这些计算时，以及实际计算和舍入的混合em 和 px，跨浏览器稳定是 ermm 要求很多..

使用col 元素更容易，并且表格确实“按比例”扩展，这也意味着当显式宽度比窗口宽时表格将滚动而不是挤压。..

使用col 方法进行列大小调整意味着您无需在其他任何地方设置大小。浏览器必须首先达到这些宽度，这就是它们在表格顶部的原因，在它甚至必须开始渲染单元格之前，它不能再碰到任何其他可能会使它失去计数的东西；）（不容易在 IE 的情况下！）- 抱歉，但问题是即使单元格上的左/右填充也会使不同的浏览器循环 - IE7 已经需要不同的单元格宽度（我在 CSS 中添加了一个 hack，我认为它不再是比浏览器舍入差异）并且一旦引入填充，它就会变得更糟 - 我已经在我的小提琴中添加了一个折衷方案，即只有第一列具有填充，因为其他文本跨越列并居中可能会因为没有任何而下车！

Working Example

在 jsfiddle 中，在 IE7 中工作，如果您注释掉主表的宽度，您应该会看到该表变为正确的尺寸 - 下面的红色条是我之前提到的 676px 指南） - 但如果你然后缩小桌子会压扁的窗口，我不知道你想要哪种行为，我只是指出来，你当然可以选择合适的宽度并给包含 div 的外部一个最小宽度，这样它就永远不会得到有机会压扁..无论如何..

（很抱歉我把这张表不需要的 CSS 去掉了，以便于阅读）

添加：

**我知道这在 webkit 浏览器中不起作用，我正在研究它..*

更新

Webkit 浏览器似乎有自己的宽度计算错误 colspan 并且因为您的表格没有没有 colspan 的行，所以我找到的唯一解决方案是添加一个包含 97 个空单元格的空白行，然后隐藏行，我将它放在源代码中的第一个单独的 tbody ID 中，以便于隐藏，因此浏览器首先点击该行。这有助于 Webkit 浏览器，因为它可以使用该行来计算之前的单个单元格宽度必须继续计算colspan。

original jsfiddle 已更新，因为这是唯一的变化，方法没有变化，值得我尝试 Webkit 中的 <col> 宽度和 <td> 宽度方法，但计算错误的colspan，无论采用哪种方式..

【讨论】：