web-dev-qa-db-fra.com

HTML css Table Colonnes mal alignées

J'ai essayé de créer une table dans AngularJS avec un en-tête et un pied de page collants. J'ai réussi à le faire; voici une démo Plunker et code:

<body ng-controller="MainCtrl as ctrl">
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>
                    Column1
                </th>
                <th>
                    Column2
                </th>
                <th>
                    Column3
                </th>
                <th>
                    Column4
                </th>
                <th>
                    Column5
                </th>
            </tr>
        </thead>
        <tbody>
            <tr class="info" ng-repeat="item in items">
              <td>
                {{item.name}}
              </td>
              <td>
                  {{item.type}}
              </td>
              <td>
                  {{item.value}}
              </td>
              <td>
                  {{item.code}}
              </td>
              <td>
                  {{item.id}}
              </td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>
                    Column1
                </th>
                <th>
                    Column2
                </th>
                <th>
                    Column3
                </th>
                <th>
                    Column4
                </th>
                <th>
                    Column5
                </th>
            </tr>
        </tfoot>
    </table>
  </body>

Mais les seuls problèmes sont:

  1. La largeur de colonne n'est pas dynamique, comme vous pouvez le constater, dans la première ligne, les données débordent dans la deuxième colonne.
  2. Les colonnes sont mal alignées.

Une idée comment résoudre ce problème?

htmlcssangularjshtml-table
17
Richard

Les critères de succès de cette question sont:

  • CSS pur.
  • Colonnes dimensionnées dynamiquement.
  • En-tête et pied de page collants de cette taille avec les colonnes.

Ce que tu veux est impossible.

La raison pour laquelle les cellules sont presque _ est correcte, car le tableau est semi-présent, mais le document contient en fait plusieurs tableaux. En redéfinissant le type d'affichage des éléments <table> sur flex, vous avez rendu la page en plusieurs groupes différents. Le <thead> et le <tfoot> sont leur propre table et leur <tbody> est sa propre table. Ils ne se dimensionnent pas les uns aux autres, mais plutôt aux autres cellules du même groupe.

D'autres guides CSS sur ce sujet nécessitent une largeur fixe. http://joshondesign.com/2015/05/23/csstable

Après avoir joué avec cela (en particulier, en essayant de déplacer thead et tfoot à des positions fixes), j'ai décidé que toute tentative d'attribution de règles spécifiques à l'en-tête/au pied de page casse la présentation du tableau et dimensionnement pour travailler différemment, ce qui explique pourquoi une largeur fixe est requise sur les cellules. Même dans les exemples, ils sont cassés de cette façon, mais la largeur fixe annule le problème.

Votre solution absolue la plus simple consiste à corriger les largeurs et à leur donner les propriétés overflow-x.

L'alternative consiste à utiliser JavaScript. Avec JS, tous les paris sont ouverts et vous pouvez faire tout ce que vous imaginez. Plus précisément, vous pouvez utiliser JS pour redimensionner automatiquement les cellules. Je me souviens d’avoir eu du succès avec un plugin jQuery qui a réussi cela.
https://www.datatables.net/

Sinon, non. Je ne trouve aucun exemple en ligne qui fasse ce dont vous avez besoin. Toute tentative visant à faire fonctionner cette présentation spécifique est un hack et il est préférable de créer une version sans JS avec des cellules de débordement x et des largeurs fixes, ainsi qu'une version compatible JS qui redimensionne automatiquement les cellules.

8
Jim

Comme vous le savez déjà dans les autres réponses, vous devriez supprimer white-space: nowrap;, mais vous pouvez également faire quelque chose à propos dubarre de défilement:

table thead, table tfoot {
    width: calc(100% - 17px);
}

 enter image description here

Plunker mis à jour

cela semble parfait sur mon PC car les barres de défilement Windows ont une largeur de 17px. Si vous voulez être en sécurité et vérifier la largeur de la barre de défilement, utilisez ceci:

window.onload = function() {
    var tr = document.getElementById("__tbody").children[0];
    var scrWidth = window.innerWidth - tr.clientWidth - 3;
    var width = "calc(100% - " + scrWidth + "px)";
    document.getElementById("__thead").style.width = width;
    document.getElementById("__tfoot").style.width = width;
}

Ceci calcule la largeur des barres de défilement, puis ajuste thead et tfoot. Bien entendu, vous devez définir les identifiants <thead id="__thead">, <tbody id="__tbody"> et <tfoot id="__tfoot">.

6
Aloso

Afin de ramener la table à son état normal, avec un redimensionnement dynamique, vous devez suivre quelques étapes. Chaque étape mentionnée donnera la liberté à ses éléments de table respectifs, leur rendant la vie beaucoup plus simple.

Tout d'abord, supprimez toutes les instances de flex. Vous voulez que la table se comporte comme une table, non? Ensuite, laissez votre thead, tr et tfoot être également eux-mêmes. Pourquoi les afficher sous forme de tableau? Enfin, votre tbody est configurée pour s’afficher en tant que bloc. En un sens, cela le distingue de ses autres amis de la table, à savoir thead et tfoot. Cela crée une situation de solitude pour toutes les personnes impliquées.

Votre code final ressemblera à ceci:

table {
    table-layout: auto;
    max-height: 300px;
}

table thead, table tfoot,
table tbody tr {
    table-layout: fixed;
}

tbody td,
thead th,
tfoot td{
    border-right: 1px solid transparent;
    vertical-align: middle;
    white-space: nowrap;
}

table thead {
    width: 100%;
}
table tfoot {
    width: 100%;
}
table tbody {
    overflow-y: auto;
}

table tbody tr {
    width: 100%;
}

Cela permettra à vos cellules de tableau d'être elles-mêmes - en les redimensionnant dynamiquement à leur guise.

4
Wes Foster

Retirer 

white-space: nowrap;

et ajouter 

Word-wrap: break-Word;

tfoot td{
        border-right: 1px solid transparent;
        vertical-align: middle;
        Word-wrap: break-Word;
    }
3
Mohsin Muzawar

1ère réponse: ajouter l'élément css à td ci-dessous

  td{
      white-space: normal;
      Word-wrap: break-Word;

      }

2ème réponse: vous devez créer un tableau séparé pour l'en-tête et le pied de page et attribuer 20% de largeur à chaque td et th. Ça devrait marcher.

2
Anil wagh

Réponse de la première question: 

td {
    text-overflow: Ellipsis !important;
    overflow: hidden !important;
}

text-overflow: Ellipsis est très utile car l'utilisateur peut copier la valeur entière.

Réponse de la deuxième question:

Regardez la réponse à cette question: Table scroll with HTML and CSS

Il semble que vous ayez besoin de javascript ou d'une solution de table interne.

UPDATED pour la deuxième réponse:

Utilisez les styles suivants sur votre table et votre table (en utilisant Chrome):

table { 
    overflow-y: visible !important;
}
tbody {
    overflow-y: overlay !important;
}

Démo Plunker

2
ykaragol

Utilisez des classes bootstrap à des fins de style. Votre style personnalisé (style.css) crée le problème. De plus, la balise <table> fournit par défaut la largeur dynamique des colonnes. Un extrait de Comment créer une colonne de largeur dynamique dans Twitter Bootstrap answer:

<table class="table">
<tr><th>Id</th>     <th>Name</th>      <th>Email address</th></tr>
<tr><td>100001</td> <td>Joe</td>       <td>[email protected]</td></tr>
<tr><td>100</td>    <td>Christine</td> <td>[email protected]</td></tr>
<tr><td>1001</td>   <td>John</td>      <td>[email protected]</td></tr>

Cela vous donnera la sortie souhaitée

1
Avantika Saini

https://plnkr.co/edit/3hYms9hRqzF2DV9yTBCG?p=preview

Ajouté ceci dans votre css:

tr.info td {Word-wrap: break-Word; white-space: normal;}
1
Mojtaba

Votre désalignement vient à cause de ce qui suit

  1. texte débordant
  2. largeur de la barre de défilement dans tbody

solution:

  1. donnez débordement-x: auto à 'td' et ainsi que max-width/width

  2. faites votre last th plus grand que les autres comme la largeur de votre barre de défilement.

  3. pour une meilleure apparence des barres de défilement, mettez des CSS personnalisés pour la barre de défilement

Ajoutez les fichiers css suivants à votre page et profitez de plunkerLink

th,td {
      width: 20%!important;
      overflow-x: auto;
      padding: 10px;
    }

    th:last-of-type {
      width: calc(20% + 6px)!important;
    }

    ::-webkit-scrollbar {
      width: 3px!important;
      height: 6px!important;
    }

    ::-webkit-scrollbar-button {
      width: 0;
      height: 0;
    }

    ::-webkit-scrollbar-thumb {
      border: 2px solid #ccc;
      background: #ccc;
      border-radius: 8px;
    }

    ::-webkit-scrollbar-track-piece {
      width: 3px!important;
      border: 1px solid #fff;
    }

 img

1
Akhilesh Kumar

Voici votre réponse: https://plnkr.co/edit/cyN0qDuxIs8LjkxIhur5?p=preview

tbody td,
thead th,
tfoot td{
    Word-wrap:break-Word;
    table-layout:fixed;
    white-space:normal;
}
1
Asim Iqbal

J'ai simplement modifié votre style.css dans démo Plunker comme suit

/* Put your css in here */

table {
    table-layout: auto;
    display: flex;
    flex-flow: column;
    max-height: 300px;
}

table thead, table tfoot,
table tbody tr {
    display: table;
    table-layout: fixed;
}

tbody td,
thead th,
tfoot td{
    border-right: 1px solid transparent;
    vertical-align: middle;
    text-align: center;
    white-space: normal;
    Word-wrap: break-Word;
    text-wrap: normal;
}

table thead {
    /*flex: 0 0 auto;*/
    width: 100%;
}
table tfoot {
    /*flex: 0 0 auto;*/
    width: 100%;
}
table tbody {
    flex: 1 1 auto;
    display: block;
    overflow-y: auto;
}

table tbody tr {
    width: 100%;
}
0
Peter Darmis