CSS extend a inner element border horizontal though the whole parent row

Question

I am dynamically generating a table. The row has many cells. One cell has a ul list in it. Some other cells in the same row have the same kind of ul list with the exact same number of li element.

So I want to strike a feeling that the li items, though they are in different cells, they are visually on the same row. Without a border, it's hard to match them in the same row. So I want to add a border line in the ul/li but since it is in the cell, I can't make it wide across the whole table row to connect with the other list in another cell in the same row...

Changing html is troublesome. Any CSS way to achieve this?

Answer 1

Its hard to say without seeing some code... But if I understand correctly, there is no easy way to put one line across table cells the way you are describing. You could however apply a bottom border to the li elements in each row like this (adds border to the third list item in each list):

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

fiddle

Its not exactly what youre looking for but it helps identify items in a row.

Answer 2

After re-reading your post, you're just trying to put an underline after the li rows? If so, you can use the same approach as my answer below, just don't use transform to move it back up so that the border is after the text

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

You can use an absolutely positioned pseudo element on the li draw the line, and make the table relatively positioned so that the line expands the width of the 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

After reading your problem I came to the following conclusion and result, you are facing problem reading cells in row. You can achieve this by:

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