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 semblent m'aider:
voir en action ici: http://jsfiddle.net/BlaM/bsQNj/2/
j'ai une disposition" dynamique " (basée sur le 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 la largeur complète de la colonne.
.data-table {
width: 100%;
}
.data-table td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
Mon problème est que certaines colonnes de la table qui ont un contenu qui doit être tronquée pour s'adapter à la largeur de la table. Cela ne se produit pas, cependant. Je reçois deux tables qui sont en superposant les uns des autres.
exigences:
- doit être fondé sur un pourcentage. Je ne peux pas absolu tailles.
- la hauteur de chaque ligne ne doit pas dépasser une ligne de texte (ce qui se produirait si je supprimais l'espace blanc: nowrap)
- doit fonctionner dans Chrome, Firefox et Internet Explorer 8 +
- ne peut pas afficher les tableaux les uns sous les autres car il doit s'adapter sur une feuille de papier lors de l'impression.
Ce que j'ai essayé:
- à l'intérieur de et utilisez la largeur et le débordement sur cela. N'a rien changé.
- "display: table;" sur le div contenant plutôt que d'avoir deux colonnes les tableaux ont été affichés au-dessous de chaque autres
- "table-layout: fixed;" - Forcé toutes les colonnes ont la même largeur
- je sais que les colonnes 2+3 ont un total de 30% de la largeur donc j'ai essayé de régler manuellement la colonne 1 à 70% - N'a pas changé quoi que ce soit
- espaces de largeur Nulle le contenu n'a rien changé, probablement en raison de white-space: nowrap;
Questions Connexes:
5 réponses
vous devez ajouter la propriété table-layout:
table-layout: fixed;
comprennent également width=100% dans le tableau de la balise HTML, pas seulement le style de la balise.
peut-être que vous serez intéressé par un piratage max-width: 0; que j'ai découvert.
il a quelques limites, nous devrions utiliser les tables CSS au lieu de HTML, mais il fonctionne:
.leftBlock
{
width: 100%;
max-width: 0;
word-wrap: break-word;
overflow: hidden;
}
.rightBlock
{
width: 200px;
max-width: 200px;
min-width: 200px;
}
les mesures sur les tables fonctionnent différemment. En général, la largeur sur une cellule de table est traitée comme la largeur minimale.
une solution, si cela ne vous dérange pas d'ajouter un supplément, est de mettre un div à l'intérieur de chaque cellule de table dans laquelle vous mettez le contenu. Alors donnez à cette div une largeur, ou une largeur max. So
<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>
et ainsi de suite.
voir violon mis à jour: http://jsfiddle.net/bsQNj/4 /
Edit: je vois que le violon a besoin de travail - j'ai oublié de mettre quelques divs là où ils étaient nécessaires. Mais j'espère que vous pouvez travailler avec cette idée.
.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>dans votre CSS:
table {
table-layout: auto;
width: 100%;
}
qui devrait couvrir toutes les tables