bordure - tableau html css



Forcer les tableaux HTML à ne pas dépasser la taille de leurs conteneurs (4)

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

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

J'ai une mise en page "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 censé utiliser toute la largeur de la colonne.

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

Mon problème est que certaines des colonnes de cette table ont un contenu qui doit être tronqué pour tenir dans la largeur donnée de la table. Cela n'arrive pas, cependant. J'ai 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 supprime les espaces blancs: nowrap)
  • Doit fonctionner dans Chrome, Firefox et Internet Explorer 8+
  • Impossible d'afficher les tableaux l'un en dessous de l'autre, car ils doivent tenir sur une feuille de papier lors de l'impression.

Ce que j'ai essayé:

  • à l'intérieur de et utiliser la largeur et le débordement sur cela. Rien changé.
  • "display: table;" sur div contenant - au lieu d'avoir deux colonnes les tableaux ont été affichés l'un en dessous de l'autre
  • "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 la largeur alors j'ai essayé de définir manuellement la colonne 1 à 70% - N'a rien changé
  • Espaces de largeur zéro dans le contenu - rien n'a changé, probablement à cause de l'espace blanc: nowrap;

Questions connexes:

https://ffff65535.com


Dans votre CSS:

table {
    table-layout: auto;
    width: 100%;
}   

Cela devrait couvrir toutes les tables


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 des balises supplémentaires, consiste à insérer un div à l'intérieur de chaque cellule de tableau dans laquelle vous insérez le contenu. Donnez ensuite à cette div une largeur ou une largeur maximale. 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 de travail - j'ai oublié de mettre des divs là où ils étaient nécessaires. Mais j'espère que vous pourrez travailler avec cette idée.


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/


.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>





column-width