CODEWITHSUNDEEP
htmlcss
chuckd
chuckd

Reputation: 14610

How to create column lines in a div table

I have a created a table with divs and I want to see lines down the sides of each column that extend all the way to the bottom. Right now they only extend down to the bottom of each list. Here is what I have. 

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

Upvotes: 0

Views: 50

Answers (3)

IMI
IMI

Reputation: 2469

Add display:table; to .maTable and display:table-cell; to .maCol. Remove float:left; from .maCol.

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

Upvotes: 1

DasBeasto
DasBeasto

Reputation: 2292

If you just add a height to the table and then have a height of 100% on the col's then they will extend to the bottom of the table. But like others have said, just use a real table instead of divs.

.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

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

Upvotes: 0

Lansana Camara
Lansana Camara

Reputation: 9873

Your HTML is not ideal for what you are trying to achieve.

First of all, your columns are not set to a specific height, therefore they will inherit a height based on what content is inside them. That is why your first column is shorter than the second, and so forth.

Secondly, Setting a border-right on the columns adds a double border because you also set a border on the whole wrapper.

Thirdly, your labels should not wrap anything. That's what the for attribute is for.

Upvotes: 0

Related Questions