Vertikaler Teiler (Rand) gleicher Länge

Question

Ich habe ein einfaches Bootstrap-Gitter mit row und col- Klassen. Ich möchte einen Tisch mit vertikalen Trennwänden erreichen, die die volle Länge der höchsten Säule haben.

Ich habe eine Demo vorbereitet, die zeigt, dass bei klassischen Ansätzen der Teiler nur so lang ist wie die aktuelle Spalte. http://www.bootply.com/8egTicqQAq

Ich sah verschiedene andere Fragen über SO mit akzeptierten Lösungen. Aber keiner von ihnen arbeitete für mich. Zumindest nicht in der neuesten Version von Chrome. Aber jeder moderne Browser sollte mit der gewünschten Lösung angesprochen werden.

Answer 1

hinzufügen display: table-.row und display: table-cell und float: none-.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; 
} 

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