dannyyy dannyyy - 1 year ago 48
CSS Question

Vertical divider (border) of same length

I have a simple bootstrap grid with

row
and
col-
classes. I want to achieve a table like appereance with vertical deviders which have the full length equal to the heighest column.

I prepared a demo which revealse that with classical approaches the devider is only as long as the current column is. http://www.bootply.com/8egTicqQAq

I looked up different other questions on SO with accepted solutions. But non of them was working for me. At least not in the newest version of Chrome. But every modern browser should be targeted with the requested solution.

Answer Source

Add a display: table to .row and display: table-cell and float: none to .col:

.row {
    width: 100%;
    margin: 2px;
    border-top: black solid 1px;
    border-bottom: black solid 1px;
    border-left: black solid 1px;
    border-right: black solid 1px;
    display: table;
}

.row > div[class^=col-] {
    border-right: black solid 1px;
    float: none;
    display: table-cell;
}

.row > div[class^=col-]:last-child {
  border:none;
}

Example: http://www.bootply.com/DNBL5ir8dG

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download