Autoadjust Zelle Breite auf Inhalt in CSS mit Überläufen

Ich habe die folgende Tabelle, mit unterschiedlichen Breiten der Inhalte in jeder Zelle. Ich möchte das lange neben dem rapsen und überlaufen.Autoadjust Zelle Breite auf Inhalt in CSS mit Überläufen

Ich habe versucht, was hier erwähnt es ist: Why does overflow:hidden not work in a <td>?

Aber das Ergebnis ist alle Zellen die gleiche Breite zu erhalten, und ich brauche, um die Zellen der inneren Gehalt einzustellen, so ist es nicht so viel taillierte weiß Leerzeichen in Zellen mit kurzem Inhalt (z. B. das Kontrollkästchen eins).

Ich kann stattdessen divs nicht anwenden, und ich kann keine spezifischen Breiten auf jede Spalte anwenden, da eine dynamische Tabelle ist, so dass die Anzahl der Spalten und der Inhalt sich ändern kann.

¿Irgendwelche Hinweise?

Hier ist der Code. Siehe example at JSfiddle

<html> 
    <head> 
    <style> 
    table { 
     width: 100%; 
    } 
    table td { 
     border: 1px solid #ccc; 
     max-width: 1px; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
    } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td> 
      <input type="checkbox" /> 
     </td> 
     <td> 
      ID001 
     </td> 
     <td> 
      Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider- 
     </td> 
     </tr> 
    </table> 
    </body> 
</html>

Quelle

2017-05-04 MaryGG

Die Größe der Spalten durch die max-width auf sie angewendet unterteilt ist. Da Sie die maximale Breite aller Spalten auf 1 Pixel festgelegt haben, werden die Spalten gleich groß, weshalb Sie drei Spalten mit gleicher Breite haben. Wenn Ihr langer Text immer in Ihrer letzten Spalte sein wird, können Sie ihm eine größere geben - zB https://jsfiddle.net/qfsoo4wv/2/ - und wenn das Kontrollkästchen in der ersten Spalte ist, könnten Sie mach das kleiner: https://jsfiddle.net/qfsoo4wv/3/ aber es bedeutet, dass alle Spalten, die eine Größe teilen, gleich breit sind – Pete

Danke Pete, das ist genau mein Problem, die letzte Spalte wird nicht immer sein Der Größte, oder der Erste, wird immer eine Checkbox setzen. Ich denke, es gibt keine richtige Lösung für mich :( – MaryGG

Ich habe den gleichen Fall, Sie haben eine funktionierende Lösung? – Kowsalya

-1

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

 
table td:nth-of-type(1) { 
 
    width: 20px; 
 
    padding: 5px 0; 
 
} 
 
table td:nth-of-type(2) { 
 
    width: 100px; 
 
} 
 
table td { 
 
    border: 1px solid #ccc; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
    padding: 5px 10px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td> 
 
     ID001 
 
    </td> 
 
    <td> 
 
     Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider-Long-text-I-want-to-overflow-without-making-the-other-columns-wider- 
 
    </td> 
 
    </tr> 
 
</table>

Quelle

2017-05-04 14:23:04

Danke, Nick, ich habe das schon versucht, aber wie gesagt, ich will keine bestimmte Breite geben zu jeder Spalte, da diese Spalten sich je nach Inhalt unterscheiden können Ich möchte, dass sich die Breite automatisch an den inneren Inhalt anpasst – MaryGG

OP hat ausdrücklich gesagt: * Ich kann keine spezifische Breite auf jede Spalte anwenden, da es eine dynamische Tabelle ist * – Pete

Autoadjust Zelle Breite auf Inhalt in CSS mit Überläufen

Antwort

Verwandte Themen