Changer d'orientation à la verticale, les lignes de la table HTML + CSS

J'ai cette table:

<table id="tabla">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td></tr>
        <tr><th>row3</th><td>cccc</td></tr>
        <figure><img src="image.png"/></figure></td></tr>
    </tbody>
</table>

Cette organise l'information en ligne... Mais je veux le faire pivoter et de les afficher dans les colonnes... j'espère que c'est assez d'explication pour ce que je veux:

Comment j'ai maintenant:

row1: aaaa
row2: bbbb
row3: cccc imag

Façon dont je le veux:

 row1 | row2 | row3
 aaaa | bbbb | cccc
             | imag

Comment puis-je le faire avec du CSS?

InformationsquelleAutor Sergio | 2017-01-04
  1. 3

    Si vous êtes contraint de n'utiliser de CSS, vous pouvez jouer avec rotation 🙂

    CSS:

    #table {
    transform:rotate(90deg);  
}
#table th, #table td{
    transform:rotate(-90deg);
}
td {
  height: 50px;
}

    HTML:

    <table id="table">
    <tbody>
        <tr><th>row1</th><td>aaaa</td></tr>
        <tr><th>row2</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
        <tr><th>row3</th><td>bbbb</td><td>bbbb</td><td>bbbb</td></tr>
    </tbody>
</table>

    • Belle solution! Mais je pense que c'est le meilleur que vous allez obtenir avec pur CSS. @Sergio Si vous voulez une meilleure solution dont vous avez besoin pour construire le tableau en CSS.
    • Je pense que ce n'est pas la meilleure solution mais au moins était drôle à faire ! La meilleure façon est de reconstruire la table correctement. 🙂
    • Oui, je vais reconstruire le tableau en CSS. De toute façon, j'ai essayé cette solution et n'était pas mauvais! 🙂
    InformationsquelleAutor Troyer
  2. 2

    Ce n'est probablement pas la solution que vous attendez, je vous encourage vraiment à regarder la nouvelle CSS Souple de Modèle de Boîte, au lieu d'utiliser des tableaux en HTML comme il va faire de votre vie beaucoup plus facile dans ce genre de scénario.

    Si vous êtes intéressés, prendre un coup d'oeil à ma réponse pour une question très semblable à Menu Vertical (+ Sous-Menu) piles anormalement.

    • Je préfère ne pas modifier la table, mais si je ne trouve pas de solutions plus peut-être que je l'utilise. Merci!
    InformationsquelleAutor Zak
  3. 0

    Utilisation display: flex sur votre tbody et de définir un divisés flex-basis sur les lignes de votre tableau.

    CSS:

    body {
  font-size: 20px;
  font-family: monospace;
}
table {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
tbody {
  display: flex;
  width: 800px;
  position: relative;
  align-items: stretch;
  border: 1px solid black;
  
}
tr {
  flex-basis: 33.33333333%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 5px 10px;
 
  
}
tr + tr {
border-left: 1px solid black;
}

th, td {
  flex-basis: 100%;
  text-align: left;
  display: flex;
  padding: 2px;
  
}
th {
  font-weight: bold;
}

    HTML:

    <table id="tabla">
    <tbody>
        <tr>
          <th>row1</th>
          <td>aaaa</td>
        </tr>
        <tr>
          <th>row2</th>
          <td>bbbb</td>
        </tr>
        <tr>
          <th>row3</th>
          <td>cccc</td>
          <td>
            <figure>
              <img src="https://via.placeholder.com/150"/>
            </figure>
          </td>
        </tr>
    </tbody>
</table>

    CodePen: https://codepen.io/jeffdaley/pen/WmgNRb?editors=1100

    Frontières peut vous donner quelques ennuis, mais cela devrait vous mettre sur la bonne voie.

    InformationsquelleAutor jeffdaley
  4. -2

    HTML:

    <table id="tabla">
    <tbody>
        <tr><th>row1</th><th>row2</th><th>row3</th></tr>
        <tr><td>aaaa</td><td>bbbb</td><td>cccc</td></tr>
        
    </tbody>
</table>

    utiliser cette

    • L'OP a demandé comment faire pour résoudre son problème avec le CSS. Votre réponse est tout simplement une réécriture de l'HTML, et vous avez omis de l'image.
    InformationsquelleAutor Dilbeer Singh