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