I have a table and at some rows i want to place the td at the end of the row
something like these:
| name | age | salary |
|---|---|---|
| john | 20 | 1000 |
| mike | 35 | 2000 |
| jessica | 23 | 1100 |
| status | ok |
| first name | last name | age | salary |
|---|---|---|---|
| john | smith | 20 | 1000 |
| mike | doe | 35 | 2000 |
| jessica | black | 23 | 1100 |
| status | ok |
I know it can be done with adding an empty td and use colspan or having td for each one of them, but the problem is my table columns are not known and it is dynamic. and also it can be done with JavaScript but it is not an option for my case
I have searched for a lot of methods but found no solution
2
You can simply use a ridiculously high number (here:1000) in the colspan attribute to make sure that this td will always cover all columns:
table {border-collapse:collapse}
td,th, caption {border: 1px solid grey; padding:4px}
caption { caption-side: bottom;
text-align: right}<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td>20</td>
<td>1000</td>
</tr>
<tr>
<td>Mike</td>
<td>Doe</td>
<td>35</td>
<td>2000</td>
</tr>
<tr>
<td>Jessica</td>
<td>Black</td>
<td>23</td>
<td>1100</td>
</tr>
<tr>
<td colspan="1000" style="text-align: right;">TD colspan: Status: OK</td>
</tr>
<tr>
<td>Sarah</td>
<td>White</td>
<td>23</td>
<td>1100</td>
</tr>
</tbody>
<caption>CAPTION: Status: OK</caption>
</table>At the bottom I also added a second way of doing it via a <caption> element. However, it seems like the border around it looks different from the standard TD solution.