当其中一个单元格中有多行文本时，单元格内联边框不会伸展

Question

我有一张由div制作的桌子。当每个单元格只有一行文本时，它工作正常，但是，当其中一个单元格中有更多文本时，麻烦就开始了。此单元格中的文本被包装为多行，此单元格的内联边框正在被拉伸，但所有其他单元格只是完整冻结。 html代码是：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

请告知我该怎么做。 TIA。

Answer 1

您可以为display: table和trow设置trow1，然后根据需要设置：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;