Как переместить текст в ячейки таблицы без увеличения / уменьшения исходного размера тд?

Question

У меня есть простой HTML стол. Я хотел бы переместить текст во всех столбцах с правой стороны во втором ряду. Я прочитал этот вопрос и это , которые дают рекомендации по установке box-sizing: border-box;, однако это не дает желаемого результата. Я имею в виду, что width первого td увеличивается, если я добавлю padding-left к div. Но я хочу оставить исходную ширину td, но текст должен быть перемещен вправо на 80 пикселей в каждом столбце.

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

Мой желаемый результат выглядит так:

Видно из изображения желаемого результата:

• все столбцы имеют одинаковую ширину
• текст во всех столбцах смещен немного вправо (80 пикселей)

Как это возможно сделать? Любая помощь будет принята с благодарностью! Спасибо!

Answer 1

Почему бы вам просто не применить padding-left: 80px; к самой ячейке, используя .move-right td в качестве селектора для нее?:

Кстати, если вы действительно хотите, чтобы все столбцы имели одинаковую ширину, Вы должны добавить width: 33.33%; к тому же селектору, чтобы избежать распределения по ширине из-за содержимого.

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

Answer 2

Похоже, ваш код кажется мне очень странным, когда вы действительно можете все упростить! предполагая, что это ваше требование, и вы должны следовать этому!

вот что вы можете сделать, я создал class и затем дал padding ТОЛЬКО этому тд.

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