Question

因此,我有一个表格,有多个栏目和固定布局。表一栏为100px宽,其他栏为6px宽。它正确展示在Catherine、因特网探索者8和9。但是,在IE7中,第一栏中的案文在几乎每个字之后都作了总结(尽管该栏的全文在一行中足够广泛),该栏比原来设想的要多约2-3倍。

jsfiddle:。

复制并抄录该守则,以索引.html,并在因特网探索者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>

我猜测这种风格需要一些 t:

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

Answer 1

根据我在这里的答复:。表格支出表:固定;如何使一个栏更广

我确实说,<代码>栏目也是控制其他栏目宽度的手段。

你的桌子非常精确,1×100px宽一栏+(4组)=96×6px,其中不包括圆环或边界的浏览器变数为676px,你还在<条码>m中做了dding,但你在座标上作了100%的放大,供浏览者知道哪一栏可以延伸,以及坐桌的宽度大于这些计算,以及实际上计算和四舍一混合物和px,在浏览器中可以 st取许多。

Using with the col element it is easier, and the table does indeed expand "in proportion" also it means the table will scroll rather than squash when the explicit width is wider than the window..

using the col method for column sizing means you do not set a size anywhere else. The Browser must hit those widths first, which is why they are at the top of the table, before it even has to start rendering the cells, and it mustn t then hit anything else which might throw it off count ;) (not easy in IE s case!)- and sorry but the catch is that even left/right padding on the cells will throw different browsers a loop - IE7 already needs a different cell width (I ve put a hack in the CSS I think it s no more than browser rounding differences) and once padding is introduced it gets worse - I ve added to my fiddle a compromise whereby only the first column has padding as the other text spanning the columns and being centered just might get off with not having any!

Working Example

如果你对主席的宽度发表评论,你就会看到桌子成为适当的方面——但如果你将桌子缩小,我就不知道你想要什么行为,我只是指出,你当然可以去做适当的宽度,给外面罩一个min子,这样它就永远不会有机会qu。

(令我感到担忧的是,本表没有必要使阅读更容易阅读)

增加:

** 我知道没有在网上浏览器上工作,我看着。

<>Update>

<代码>Webkit浏览器似乎有自己的宽度计算比乘以colpan,因为贵表格没有“colspan的浏览量。我发现的唯一解决办法是增加97个空洞囚室的空白囚室,然后隐藏该囚室;我把它放在一个单独的<密码>上,使之易于藏匿,从而使浏览器首先打上该行;这帮助了Webkit browsers,因为它能够利用这一行来计算个人牢房的宽度,然后才能进入并计算一个栅栏。

original jsfiddle 经过更新,因为这是唯一的改动,没有改变方法,因为这种方法对我所尝试的价值是:<col> width and <td> width methods in Webkit,但错误计算不管怎么办。

Answer 2

你们应当清除 t上 w的 w,因为th在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;
}

Working Example

友情链接