0

複雑な結果を得るために、このポジショニング トリックを少し使用しました。理解に苦しむ Webkit ブラウザのバグに遭遇したと思います。

簡単なマークアップは次のとおりです。

<table>
<tbody>
    <tr>
        <td>
        <div>
            <span class="cols-6"></span>
        </div></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</tbody>

およびCSS:

*, *:after, *:before {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

table {
    table-layout: fixed;
    border-collapse: collapse;
    width: 100%;
}
tr {
    border: 1px solid #ddd;
}
td {
    vertical-align: top;
    padding: 0;
    height: 100px;
    border: solid #ddd;
    border-width: 1px 0 0 0;
    box-shadow: -1px 0px #ddd;
}
td div {
    position: relative;
}
td div span.cols-6 {
    position: absolute;
    width: 600%;
    height: 20px;
    background: #ccc;
}

これを実際に確認するには、 Chrome でhttp://jsfiddle.net/JFxqt/14/を開いてください。

表示されるスパンは、相対コンテナー内に絶対配置されます。テーブルは固定レイアウトを使用するため、そのセルはすべて固定幅であるため、子はパーセンテージ幅を利用できるはずです。テーブルには 7 列あり、スパンの幅は 600% (つまり、6 列 * 100%) に設定されています。Webkit ブラウザーの 6 列すべてをカバーすることはできません。Firefox と IE は、指定されたすべての列を完全にレンダリングします。

理想的には、スパンの幅を 100% に設定すると、1 列でレンダリングされ、2 列で 200% というようにレンダリングされます。

誰にもアイデアや回避策がありますか?

4

3 に答える 3

0

これを試してください：http://jsfiddle.net/JFxqt/3/

CSSでこれを変更しました：

body{margin:0px}
td div {

}
span.cols-6 {
    position: absolute;
    width: 85.6%;
    height: 20px;
    background: #ccc;
    z-index:10;
    top:0;
    left:0;
}
于 2013-04-22T13:26:38.967 に答える