In my simple HTML table, I am trying to align the text in all columns to the right side in the second row.
After exploring this question and this one, which suggest setting box-sizing: border-box;, I found that the desired result was not achieved. The width of the first td increased when I applied padding-left to the div. However, I want to maintain the original width of the td while moving the text 80px to the right in each column.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-collapse: collapse;
width: 100%;
}
table td, table th {
border: 1px solid black;
}
table tr:first-child th {
border-top: 0;
}
table tr:last-child td {
border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
border-right: 0;
}
.move-right td > div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: bold;
max-width: 100%;
background-color: lightgreen;
}
.move-right td > div div {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: bold;
background-color: lightpink;
padding-left: 80px;
}
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Book</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jon</td>
<td>Skeet</td>
<td>C# in Depth</td>
</tr>
<tr class="move-right">
<td >
<div><div>Joseph</div></div>
</td>
<td>Albahari</td>
<td>C# in Nutshell</td>
</tr>
</tbody>
</table>This is how I envision the outcome:
https://i.sstatic.net/iLrE7.png
The desired result in the image shows that:
- all columns are equal in width
- text in all columns has been shifted slightly to the right (by 80px)
How can I achieve this? Any guidance would be highly appreciated! Thank you!