J'ai un simple tableau HTML. Je voudrais déplacer le texte de toutes les colonnes vers le côté droit de la deuxième ligne. J'ai lu cette question et ceci qui donne des conseils pour définir box-sizing: border-box;, mais il le fait ne donne pas le résultat souhaité. Je veux dire, que le width du premier td augmente, si j'ajoute padding-left à div. Mais je souhaite conserver la largeur d'origine de td, mais le texte doit être déplacé vers la droite de 80 pixels dans chaque colonne.

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

Mon résultat souhaité ressemble à ceci:

enter image description here

On peut voir sur l'image du résultat souhaité que:

  • toutes les colonnes ont la même largeur
  • le texte de toutes les colonnes a été légèrement déplacé vers la droite (80 px)

Comment faire? Toute aide serait grandement appréciée! Merci!

0
Learner 25 avril 2020 à 19:50

2 réponses

Meilleure réponse

Pourquoi n'appliquez-vous pas simplement le padding-left: 80px; à la cellule elle-même, en utilisant .move-right td comme sélecteur?:

BTW, si vous voulez vraiment que toutes les colonnes aient la même largeur, vous devez ajouter width: 33.33%; à ce même sélecteur afin d'éviter la distribution de largeur due au contenu.

* {
	  -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>
2
Johannes 25 avril 2020 à 17:17

Il me semble que votre code me semble très étrange où vous pouvez vraiment simplifier les choses! en supposant que c'est votre exigence et que vous devez suivre ceci!

Voici quelque chose que vous pouvez faire, j'ai créé un class et ensuite donné padding UNIQUEMENT à ce 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>

enter image description here

2
Manjuboyz 25 avril 2020 à 17:56