Avoir une question. Comment définir la disposition des colonnes pour que l'écriture soit parallèle au haut, voici le code:

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 10%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland Netherland</td>
  <td>Brown</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>

Je veux une mise en page comme celle-ci, je veux que le texte de la deuxième colonne soit aligné avec la première colonne:

enter image description here

0
Imam Ahmad Ashari 31 août 2020 à 07:00

2 réponses

Meilleure réponse

Créer une règle vertical-align: top pour th

<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
  border: 1px solid black;
}

td{
  vertical-align: top;
}

table {
  border-collapse: collapse;
  width: 10%;
}

th {
  text-align: left;
}
</style>
</head>
<body>

<table>
  <tr>
  <th>Firstname</th>
  <th>Lastname</th>
  <th>Savings</th>
  </tr>
  <tr>
  <td>Peter</td>
  <td>Griffin</td>
  <td>$100</td>
  </tr>
  <tr>
  <td>Lois</td>
  <td>Griffin</td>
  <td>$150</td>
  </tr>
  <tr>
  <td>Joe</td>
  <td>Swanson</td>
  <td>$300</td>
  </tr>
  <tr>
  <td>Cleveland Netherland</td>
  <td>Brown</td>
  <td>$250</td>
</tr>
</table>

</body>
</html>
0
sergey kuznetsov 31 août 2020 à 04:13

Vous devez cibler le 2ème enfant et définir l'alignement vertical vers le haut

table tr td:nth-child(2) {
  vertical-align: top
}

Exemple en direct

table,
td,
th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 10%;
}

th {
  text-align: left;
}

table tr td:nth-child(2) {
  vertical-align: top
}
<!DOCTYPE html>
<html>

<body>

  <table>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Savings</th>
    </tr>
    <tr>
      <td>Peter</td>
      <td>Griffin</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Lois</td>
      <td>Griffin</td>
      <td>$150</td>
    </tr>
    <tr>
      <td>Joe</td>
      <td>Swanson</td>
      <td>$300</td>
    </tr>
    <tr>
      <td>Cleveland Netherland</td>
      <td>Brown</td>
      <td>$250</td>
    </tr>
  </table>

</body>

</html>

Référence

: nième enfant ()

alignement vertical

0
hgb123 31 août 2020 à 04:12