CSS通過整個父行將內部元素邊框水平延伸

Question

我正在動態生成一個表。 該行有很多單元格。 一個單元格中有一個ul列表。 同一行中的其他一些單元格具有相同種類的ul列表，且li元素的數量完全相同。

因此，我想產生一種感覺，即li項雖然位於不同的單元格中，但它們在視覺上位於同一行。 沒有邊框，很難在同一行中匹配它們。 所以我想在ul/li添加一條邊界線，但是由於它在單元格中，因此無法使其在整個表格行中都變寬，無法與同一行中另一個單元格中的其他列表進行連接...

更改html很麻煩。 有什么CSS方式可以做到這一點？

Answer 1

不看一些代碼就很難說...但是，如果我理解正確的話，沒有一種簡單的方法可以按照您所描述的方式在表格單元格中放置一行。 但是，您可以像這樣在每行中的li元素上應用底部邊框（將邊框添加到每個列表中的第三個列表項）：

td li:nth-child(3) {
    border-bottom: 1px solid red;
}

小提琴

它不完全是您要查找的內容，但可以幫助您連續識別項目。

Answer 2

重新閱讀您的文章后，您只是想在li行后加下划線？ 如果是這樣，您可以使用與我在下面的答案相同的方法，只是不要使用transform將其向上移動，以便邊框位於文本之后

 * { margin:0; padding:0; box-sizing:border-box; } ul { list-style: none; } table { border: 1px solid black; position: relative; } td { padding: 1em; } li:not(:last-child):after { content: '\\00a0'; border-bottom: 1px solid black; left: 0; right: 0; position: absolute; } 

 <table> <tr> <td> <ul> <li>foo</li> <li>bar</li> <li>foo</li> </ul> </td> <td> <ul> <li>foo</li> <li>bar</li> <li>foo</li> </ul> </td> <td> <ul> <li>foo</li> <li>bar</li> <li>foo</li> </ul> </td> </tr> </table> 

您可以在li上使用絕對定位的偽元素來繪制線條，並使table相對放置，以使線條擴大表格的寬度。

 * { margin:0; padding:0; box-sizing:border-box; } ul { list-style: none; } table { border: 1px solid black; position: relative; } .strike:after { content: '\\00a0'; border-bottom: 1px solid black; left: 0; right: 0; position: absolute; transform: translateY(-50%); } 

 <table> <tr> <td> <ul> <li>foo</li> <li>bar</li> <li>foo</li> </ul> </td> <td> <ul> <li class="strike">foo</li> <li>bar</li> <li>foo</li> </ul> </td> <td> <ul> <li>foo</li> <li>bar</li> <li class="strike">foo</li> </ul> </td> </tr> </table> 

Answer 3

閱讀完您的問題后，我得出以下結論和結果，您正在面對排成一行的問題閱讀單元。 您可以通過以下方法實現此目的：

ul {  
border: 1px solid black;  
}  
row {  
border: 1px solid black;  
}