Kay Kay - 4 years ago 95
CSS Question

Cells inline-border doesn't stretch out when there is more than one line of text in one of the cells

I've got a table made from divs. It works fine when every cell has only one line of text, however, when there's more text in one of the cells, the trouble begins. The text in this cell is being wrapped to multiple lines, the inline-border of this cell is being stretched, but all other cells just freeze intact.
The html code is:



div {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.container {
display: table;
border-collapse: collapse;
vertical-align: middle;
width: 100%;
}
.trow {
width: 100%;
display: table-row;
border: 1px solid;
}
.trow1 {
width: 100%;
display: table-row;
border: 1px solid;
text-align: center;
}
.tcell {
float: left;
display: table-cell;
border-right: 1px solid;
}

<div class="container">
<div class="trow1">
<div class="tcell" style="line-height: 35px; width:30%; height:40px;">Left Stuff</div>
<div class="tcell" style="line-height: 35px; width:40%; height:40px;">Middle Stuff</div>
<div class="tcell" style="line-height: 35px; width:30%; height:40px;">Right Stuff</div>
<br style="clear: left;" />
</div>
<div class="trow">
<div class="tcell" style="width:25%;">Left Stuff</div>
<div class="tcell" style="width:40%;">Middle Stuff</div>
<div class="tcell" style="width:25%;">Right Stuff</div>
<div class="tcell" style="width:10%;">R-Right StuffR-Right StuffR-Right StuffR-Right StuffR-Right StuffR-Right Stuff</div>
<br style="clear: left;" />
</div>
</div>





Please advice what could I do. TIA.

Answer Source

You can set display: table for trow and trow1, then it looks as you want:

div {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.container {
  display: table;
  border-collapse: collapse;
  vertical-align: middle;
  width: 100%;
}
.trow {
  width: 100%;
  display: table;
  border: 1px solid;
}
.trow1 {
  width: 100%;
  display: table;
  border: 1px solid;
  text-align: center;
}
.tcell {
  display: table-cell;
  border-right: 1px solid;
}
<div class="container">
  <div class="trow1">
    <div class="tcell" style="line-height: 35px; width:30%; height:40px;">Left Stuff</div>
    <div class="tcell" style="line-height: 35px; width:40%; height:40px;">Middle Stuff</div>
    <div class="tcell" style="line-height: 35px; width:30%; height:40px;">Right Stuff</div>
  </div>
  <div class="trow">
    <div class="tcell" style="width:25%;">Left Stuff</div>
    <div class="tcell" style="width:40%;">Middle Stuff</div>
    <div class="tcell" style="width:25%;">Right Stuff</div>
    <div class="tcell" style="width:10%;">R-Right StuffR-Right StuffR-Right StuffR-Right StuffR-Right StuffR-Right Stuff</div>
  </div>
</div>

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