如何在div表中创建列行

Question

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

＆＃13;

＆＃13;

createdSquares

＆＃13;

.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;
    }

＆＃13;

＆＃13;

＆＃13;

Answer 1

将display:table;添加到.maTable，将display:table-cell;添加到.maCol。从float:left;移除.maCol。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的HTML并不适合您要实现的目标。

首先，您的列未设置为特定高度，因此它们将根据其中的内容继承高度。这就是为什么你的第一列比第二列短，等等。

其次，在列上设置border-right会添加双边框，因为您还在整个包装上设置了边框。

第三，你的标签不应该包装任何东西。这就是for属性的用途。

Answer 3

如果您只是在桌子上添加一个高度，然后在col的高度为100％，那么它们将延伸到桌子的底部。但就像其他人所说的那样，只需使用真正的表而不是div。

＆＃13;

＆＃13;

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

    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;