html - 如何在 div 表中创建列线

Question

我创建了一个带有 div 的表格，我希望看到每列两侧的线条一直延伸到底部。现在它们只延伸到每个列表的底部。 这是我所拥有的。

.maCol {
        float: left;
        width: 10em;
        border-right: 1px solid #CCC;
        border-left: 1px solid #CCC;
        border-top: 0px;
        border-bottom: 0px;
    }
.maRow {
        /*border: 1px solid #DDD;*/
        padding: 0.5em;
    }
.maTable {
        border: 1px solid #CCC;
        float: left;
        border-radius: 6px;
    }

<div id="marketAccessTableView" class="maTable">

    <div class="maCol L1">
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN1</label></div>
    </div>
    <div class="maCol L2">
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
    </div>
    <div class="maCol L7">
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
    </div>
</div>

Answer 1

将 display:table; 添加到 .maTable 并将 display:table-cell; 添加到 .maCol。从 .maCol 中删除 float:left;。

.maCol {
        /*removed float:left;*/
        width: 10em;
        border-right: 1px solid #CCC;
        border-left: 1px solid #CCC;
        border-top: 0px;
        border-bottom: 0px;
        display:table-cell; /* add this */
    }
.maRow {
        /*border: 1px solid #DDD;*/
        padding: 0.5em;
    }
.maTable {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: table; /* add this */
    float: left;
}

<div id="marketAccessTableView" class="maTable">

    <div class="maCol L1">
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN1</label></div>
    </div>
    <div class="maCol L2">
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN2</label></div>
    </div>
    <div class="maCol L7">
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
        <div class="maRow"><label><input type="checkbox" name="vehicle" value="Bike"> SGN3</label></div>
    </div>
</div>