<table style="table-layout: fixed;"> <tr> <td> Table avec table-layout: fixed; et comment rendre une colonne plus large </td> <

Question

Donc j'ai une table avec ce style :

table-layout: fixed;

Ce qui fait en sorte que toutes les colonnes ont la même largeur. Je voudrais que la première colonne soit plus large et que le reste des colonnes occupe la largeur restante de la table avec des largeurs égales.

Comment y parvenir ?

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid black;
  background: #ddd;
  table-layout: fixed;
}

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

table td.wideRow, table th.wideRow {
  width: 300px;
}

      Rezervovane auta

      Auto
      0
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23

      KE-260 FC - Octavia combi

        Richard Knop

        Richard Knop

jsfiddle: http://jsfiddle.net/6p9K3/

Remarquez la première colonne, je veux qu'elle soit large de 300px.

Answer 1

Vous pourriez simplement donner à la première cellule (donc colonne) une largeur et laisser le reste par défaut à auto

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
  width: 150px;
}
td+td {
  width: auto;
}

    150px
    égal
    égal

---

ou alors, la "bonne façon" d'obtenir les largeurs des colonnes pourrait être d'utiliser l'élément col lui-même

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
}
td {
  border: 1px solid #000;
}
.large {
  width: 150px;
}

      150px
      égal
      égal

Answer 2

La chose importante de table-layout: fixed est que les largeurs des colonnes sont déterminées par la première rangée du tableau.

Donc

si votre structure de tableau est la suivante (structure de tableau standard)

  si vous souhaitez donner une largeur à la deuxième colonne alors 
    table{
        table-layout:fixed;
        width: 100%;
    }

    table tr th:nth-child(2){
       width: 60%;
     }

Veuillez noter que nous stylons le th et non le td.

           Première colonne 
           Deuxième colonne 
           Troisième colonne         

           Première colonne 
           Deuxième colonne 
           Troisième colonne

Answer 3

Créez-vous une très grande table (des centaines de lignes et de colonnes) ? Si c'est le cas, table-layout: fixed; est une bonne idée, car le navigateur n'a besoin de lire que la première ligne pour calculer et rendre l'ensemble du table, ce qui le charge plus rapidement.

Mais sinon, je suggérerais de supprimer table-layout: fixed; et de changer votre css comme suit :

table th, table td{
border: 1px solid #000;
width:20px;  //ou quelque chose de similaire   
}

table td.wideRow, table th.wideRow{
width: 300px;
}

http://jsfiddle.net/6p9K3/1/

Answer 4

Ce que vous pourriez faire, c'est quelque chose comme cela (pseudocode) :

      <"300px" table>

Fondamentalement, divisez le tableau en deux tableaux et faites-le contenir par un autre tableau.