Question

我目前正在使用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/。

正如你所看到的，“阿拉巴马”和“阿拉斯加”div有一个背景颜色，没有正确扩展以填充div，以及表中其余大部分div（最高的div是清晰的例外）边界没有正确地扩展到它们的全高。

我更愿意找到一种方法来完成这些调整，而不需要使用display-table或类似的，因为我（不幸的是）必须让这段代码在IE中运行。如果可能的话，我宁愿使用CSS而不是jQuery。

将div边框扩展到最高同级的高度，并将背景颜色扩展为完整div高度

0 个答案: