Question

我正在创建一个带有表格式结构的小部件，而我却看不到为什么右边的两行没有扩展到全宽（或者为什么它们没有红色边框）他们）。

我的目标是让黑色横向规则在第1行和第2行之间运行，并到达整个表格的最右端。

＆＃13;

.table {
  display: table;
  width: 100%;
  white-space: nowrap;
  border: 1px solid blue;
}
#cell1 {
  display: table-cell;
  padding-left: 30px;
  border: 1px dashed orange;
}
#cell1 > #line1 {
  display: inline-block;
  font-size: 16px;
  padding-top: 5px;
  border: 1px solid red;
}
#cell1 > #line2 {
  display: inline-block;
  font-size: 30px;
  border: 1px solid red;
}
#cell1 > #line3 {
  display: inline-block;
  padding-right: 20px;
  border: 1px solid red;
}
#cell2 {
  display: block;
  width: 100%;
  border: 1px dashed orange;
}
#cell2 > #topRow {
  display: table-row;
  width: 100%;
  border: 1px solid red;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid black; // horizontal rule
}
#cell2 > #bottomRow {
  display: table-row;
  width: 100%;
  border: 1px solid red;
  padding-top: 10px;
  padding-bottom: 10px;
}

＆＃13;

<div class="table">

  <div id="cell1">
    <span id="line1">line 1</span>
    <br>
    <span id="line2">line 2</span>
    <br>
    <span id="line3">line 3</span>
  </div>


  <div id="cell2">
    <div id="topRow">
      This is the top row
    </div>

    <div id="bottomRow">
      This is the bottom row
    </div>
  </div>
</div>

＆＃13;

Answer 1

删除display:table-row以使底部边框可见

或使用：

<div id="topRow">
    This is the top row
</div>
<hr />
<div id="bottomRow">
    This is the bottom row
</div>

Answer 2

您需要做的是创建一个全宽行，其中包含<hr>。

<tr><!-- table row 100% width -->
<hr></hr>
</tr>

您定义了一个新的全宽表行，只有水平规则贯穿其中。

实际上看起来你甚至没有使用表格，所以这是一个奇怪的问题 - 但是，在你的情况下，只需要在其中div或者位置创建一个全宽<hr>通过直接向hr元素添加选择器，absolute z-index { root: [{ text: 'myroot', expanded: true children: [{ .... }] }] }。{/ p>

CSS table-row没有在table-cell内扩展100％

2 个答案: