show a border in table rows when there is not td - html

Question

I have a table with different number of <td>, something like this:
<table>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
</tr></tbody>
<tbody><tr><td>1</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr></tbody>
</table>
I want to draw a line under every row, I tried these styles:
table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
This is what I get:
Lines are not reaching the end of the table, this is the expected result:
Is this possible using css only?
table{border-collapse: collapse;empty-cells: show;}
tbody{border-bottom:1px solid #000;}
tr{border-bottom:1px solid #000;}
td{border-bottom:1px solid #000;}
<table>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td>
</tr></tbody>
<tbody><tr><td>1</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td>
</tr></tbody>
<tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td>
</tr></tbody>
</table>

Answer 1

Use a pseudo element to create a long line and hide the overflow:
table {
border-collapse: collapse;
empty-cells: show;
overflow: hidden;
}
td {
position: relative;
padding: 5px;
}
td:first-child:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: -100vw;
;
height: 1px;
background: #000;
}
<table>
<tbody>
<tr>
<td>111</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>33</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>

Answer 2

Your new code:
table {
border-collapse: collapse;
empty-cells: show;
}
tr {
border-bottom: 1px solid #000;
display: block;
}
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
Just changed the display CSS property of the rows to block.
This isn't the perfect solution for dynamic data so I would suggest making a table out of divisions and CSS.
I also suggest that you accept #Temani Afif answer since it is better than mine in the way that you can keep your table structure as well using the pseudo elements.