web-dev-qa-db-fra.com

Forcer les tables HTML à ne pas dépasser la taille de leurs conteneurs

Cette question a été posée plusieurs fois, mais aucune des réponses fournies ne semble m'aider:

Voir ceci en action ici: http://jsfiddle.net/BlaM/bsQNj/2/

J'ai une disposition "dynamique" (basée sur un pourcentage) avec deux colonnes.

.grid {
    width: 100%;
    box-sizing: border-box;
}
.grid > * {
    box-sizing: border-box;
    margin: 0;
}
.grid .col50 {
    padding: 0 1.5%;
    float: left;
    width: 50%;
}

Dans chacune de ces colonnes, j'ai un tableau qui est censé utiliser toute la largeur des colonnes.

.data-table {
    width: 100%;
}
.data-table td {
    white-space: nowrap;
    text-overflow: Ellipsis;
    overflow: hidden;
}

Mon problème est que certaines des colonnes de ce tableau ont un contenu qui doit être tronqué pour tenir dans la largeur donnée du tableau. Mais cela ne se produit pas. J'obtiens deux tables qui se superposent.

Exigences:

  • Doit être basé sur un pourcentage. Je ne peux pas définir de tailles absolues.
  • La hauteur de chaque ligne ne doit pas dépasser une ligne de texte (ce qui arriverait si je supprimais l'espace blanc: nowrap)
  • Doit fonctionner dans Chrome, Firefox et Internet Explorer 8+
  • Impossible d'afficher les tableaux les uns en dessous des autres car il doit tenir sur une seule feuille de papier lors de l'impression.

Ce que j'ai essayé:

  • à l'intérieur et utiliser la largeur et le débordement là-dessus. Rien changé.
  • "display: table;" sur contenant div - au lieu d'avoir deux colonnes, les tableaux étaient affichés les uns au-dessous des autres
  • "table-layout: fixed;" - Forcer toutes les colonnes à avoir la même largeur
  • Je sais que les colonnes 2 + 3 ont un total de 30% de largeur, j'ai donc essayé de définir manuellement la colonne 1 à 70% - Je n'ai rien changé
  • espaces de largeur nulle dans le contenu - n'a rien changé, probablement à cause de l'espace blanc: nowrap;

Questions connexes:

htmlcsshtml-tablecolumn-width
36
BlaM

vous devez ajouter la propriété table-layout:

table-layout: fixed;

inclure également width = 100% dans la balise HTML du tableau, pas seulement la balise style.

http://jsfiddle.net/reeK5/

58
eudemonics

Peut-être que vous serez intéressé par un max-width: 0; hack que j'ai découvert.

Il a quelques limites, nous devrions utiliser des tableaux CSS au lieu de HTML, mais cela fonctionne:

.leftBlock
{
    width: 100%;
    max-width: 0;
    Word-wrap: break-Word;
    overflow: hidden;
}

.rightBlock
{
    width: 200px;
    max-width: 200px;
    min-width: 200px;
}

http://jsfiddle.net/CyberAP/NUHTk/103/

5
CyberAP

Les mesures sur les tables fonctionnent différemment. En général, la largeur d'une cellule de tableau est traitée comme une largeur minimale.

Une solution, si cela ne vous dérange pas d'ajouter du balisage supplémentaire, consiste à mettre un div à l'intérieur de chaque cellule du tableau dans lequel vous placez le contenu. Donnez ensuite à ce div une largeur, ou une largeur max. Alors

<td>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</td>

devient

<td><div>http://www.xxxxxx.xxxxxxx.com/xxx_xxxx/XXXXXXXX/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/XXXXXXXX_xXxxxx</div></td>

etc.

Voir le violon mis à jour: http://jsfiddle.net/bsQNj/4/

Edit: Je vois que le violon a besoin d'un peu de travail - j'ai oublié de mettre des divs là où elles étaient nécessaires. Mais j'espère que vous pourrez travailler avec cette idée.

2
Mr Lister
.div {
  width:300px;
  border:1px solid;
}
.breaked {
  Word-break: break-all;
}
table{
  border:1px solid red;
}
td {
  border:1px solid green;
}
<div class="div">
<table>
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
  <br /><hr/><br />
  <table class="breaked">
  <tr>
    <td>aaaaaaa_________________________________________-sdasd-ad-f-asfas-df-a a-sd-fa-d-ad-fa-ds-asd-a-ads-fa-df-ads-fa-d-fad-f-ad-fad-ad-sa-fda-df-</td>
    <td>13</td>
  </tr>
  <tr>
    <td>ddddddddddddd</td>
    <td>aa</td>
  </tr>
 </table>
</div>
1
Kris Roofe