如何在不增加或减少td的原始大小的情况下在表格单元格中移动文本？

Question

我有一个简单的HTML表格。我想将所有列中的文本移到第二行的右侧。我已经给出了设置read this question的建议的this和box-sizing: border-box;，但是它没有给出期望的结果。我的意思是，如果我将width添加到td，则第一个padding-left的div会增加。但是我想保持td的原始宽度，但在每一列中应将文本向右移动80px。

	* {
	  -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，然后仅将该td指定为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>