0

我目前正在使用 div 和 CSS 重新设计表格（因为表格在移动设备上显示效果不佳）。但是，我坚持设计的一部分。我似乎无法让我的 div 的边框扩展它们的完整高度（由兄弟决定），我似乎无法让我的“标题”列中的背景颜色跨越 div 的整个高度。

#sol-table {
    border-left: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    border-top: 1px solid #CCCCCC;
}

#sol-header {
    border-bottom: 1px solid #CCCCCC;
}

.sol-state-statute, .sol-state-open, .sol-state-promissory, .sol-state-oral, .sol-state-written {
    border-left: 1px solid #CCCCCC;
}

.sol-state {
    border-bottom: 1px solid #CCCCCC;
}

#sol-header, .sol-state {
    overflow: hidden;
}

#sol-header, .sol-state-name {
    background-color: #F0F0F0;
}

.sol-state-odd {
    background-color: #FFFFFF;
}

.sol-state-even {
    background-color: #F7F7F7;
}

.sol-header-info, .sol-state-info {
    float: left;
    width: 10%;
    text-align: center;
}

.sol-state-info {
    text-align: center;
}

.sol-state-name, .sol-state-statute {
    text-align: left;
}

#sol-header-state, .sol-state-name {
    width: 12%;
}

#sol-header-open, .sol-state-open {
    width: 15%;
}

#sol-header-statute, .sol-state-statute {
    width: 40%;
}



<div id="sol-table">

    <div id="sol-table-content">

        <div id="sol-header">
            <div class="sol-header-info" id="sol-header-state">State</div>
            <div class="sol-header-info" id="sol-header-written">Written Contracts</div>
            <div class="sol-header-info" id="sol-header-oral">Oral Contracts</div>
            <div class="sol-header-info" id="sol-header-promissory">Promissory Notes</div>
            <div class="sol-header-info" id="sol-header-open">Open-Ended Accounts<br />(e.g., Credit Cards)</div>
            <div class="sol-header-info" id="sol-header-statute">Link to Statute(s)</div>
        </div>

        <div class="sol-state sol-state-odd" id="sol-alabama">
            <div class="sol-state-info sol-state-name">Alabama</div>
            <div class="sol-state-info sol-state-written">#</div>
            <div class="sol-state-info sol-state-oral">#</div>
            <div class="sol-state-info sol-state-promissory">#</div>
            <div class="sol-state-info sol-state-open">#</div>
            <div class="sol-state-info sol-state-statute">Line 1<br />Line 2<br />Line 3<br /></div>
        </div>

        <div class="sol-state sol-state-even" id="sol-alaska">
            <div class="sol-state-info sol-state-name">Alaska</div>
            <div class="sol-state-info sol-state-written">#</div>
            <div class="sol-state-info sol-state-oral">#</div>
            <div class="sol-state-info sol-state-promissory">3</div>
            <div class="sol-state-info sol-state-open">#</div>
            <div class="sol-state-info sol-state-statute">Line 1<br />Line 2<br />Line 3<br />Line 4<br />Line 5<br />Line 6<br /></div>
        </div>

    </div>

</div>

这是我当前的代码：http: //jsfiddle.net/KYthh/。

如您所见，“Alabama”和“Alaska” div 的背景颜色没有正确扩展以填充 div，并且表中的大多数其余 div（最高 div 是明显的例外）有未正确扩展至完整高度的边框。

我宁愿找到一种方法来完成这些调整，而无需求助于 display-table 或类似的东西，因为我（不幸的是）必须让这段代码在 IE 中工作。如果可能的话，我更喜欢使用 CSS 而不是 jQuery。

4

0 回答 0