CSS table-row在表格單元格內不擴展100％

Question

我使用表格結構創建了一個窗口小部件，我沒有看到爲什麼右邊的兩行沒有展開爲全寬（或者他們爲什麼不'周圍沒有紅色邊框）。

我的目標是讓黑色水平線在第1行和第2行之間運行，並且到達整個表的最右端。

Demo Fiddle

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

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

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

你所要做的是創建一個完整的WID在你的<hr>之內。

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

您定義了一個新的全寬度表格行，只有橫向規則貫穿其中。

---

其實看來你甚至不使用表，所以這是一種奇怪的問題 - 但是，你的情況只是做一個全寬div與其中的<hr>，或小時absolute與定位通過將選擇符直接添加到hr元素來提高z-index。