How to move text in table-cells without increasing/decreasing original size of td?

Question

I have a simple HTML table. I would like to move text in all columns to the right side in the second row. I've read this question and this which give advice to set box-sizing: border-box;, however it does not give desired result. I mean, that the width of first td increases, if I add padding-left to div. But I want to keep original width of td, but text should be moved to right for 80px 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>

My desired result looks like this:

It can be seen from the image of the desired result that:

• all columns have the same width
• text in all columns moved slightly to the right(80px)

How is it possible to do? Any help would be greatly apprecited! Thank you!

Answer 1

It looks like your code seems very odd to me where you can really make things simple! assuming it is your requirement and you have to follow this!

here is something you can do, I have created a class and then have given padding ONLY to that td.

	* {
	  -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;
	}
  
  .fixThis  td{
    background-color:grey;
    padding-left:80px;
  }

	.move-right td{
	  box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  font-weight: bold;
	  max-width: 100%;
	  background-color: lightgreen;
    padding-left:80px;
	}

	

<table class="table">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Book</th>
    </tr>
  </thead>
  <tbody>
    <tr class="fixThis">
      <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>

Answer 2

Why don't you just apply the padding-left: 80px; to the cell itself, using .move-right td as the selector for it?:

BTW, if you really want all columns to have the same width, you should add width: 33.33%; to that same selector in order to avoid the width distribution due to the contents.

* {
	  -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;
	}
  .move-right td {
      padding-left: 80px;
      width: 33.33%;
  }

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