html - 当其中一个单元格中有多于一行文本时，单元格内联边框不会拉伸(stretch)

Question

我有一张由 div 制成的 table 。当每个单元格只有一行文本时它工作正常，但是，当其中一个单元格中有更多文本时，麻烦就开始了。该单元格中的文本被换行成多行，该单元格的行内边框被拉伸(stretch)，但所有其他单元格都完好无损。 html代码是:

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>

请指教我该怎么做。 TIA。

Answer 1

你可以为trow和trow1设置display:table，然后显示你想要的样子:

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>