Überlauf: Versteckte funktioniert nicht bei der Verwendung von Tabellen

Ich habe Probleme mit langen Strings Text streckte meine Tabellen und overflow:hidden scheint nicht zu tun, was ich habe. Hier ist der Beispielcode ich diesen Effekt zu testen, bin mit:Überlauf: Versteckte funktioniert nicht bei der Verwendung von Tabellen

<html> 
    <head> 
     <style type="text/css"> 
      td.scroll 
      { 
       background-color:#00FFFF; 
       width:100px; 
       height:100px; 
       overflow:scroll; 
      } 
      td.hidden 
      { 
       background-color:#00FF00; 
       width:100px; 
       height:100px; 
       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <table width="100%"> 
      <tr> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="scroll">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
      <tr> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
       <td class="hidden">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

Wenn geladen wird, wird der Text, unabhängig von der Tabellenbreite, streckt alle der Zeichenfolge anzuzeigen. Ich möchte, dass ein Teil der Zeichenfolge, die über die Zellenmessung hinausgeht, nicht angezeigt wird. Ist das mit Tabellen überhaupt möglich, und wenn ja, was mache ich falsch?

Quelle

2009-10-29 canadiancreed

Überlauf funktioniert nur auf Blockelemente. Tabellenelemente sind keine Blockelemente. Wenn Sie diese Effekte erhalten möchten, setzen Sie eine <div> in die Tabellenzelle und wenden Sie die Effekte auf die <div>.

td.scroll div { 
    background-color: #00FFFF; 
    width: 100px; 
    height: 100px; 
    overflow: scroll; 
} 

td.hidden div { 
    background-color: #00FF00; 
    width: 100px; 
    height: 100px; 
    overflow: hidden; 
}

mit:

<table width="100%"> 
<tr> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="scroll"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 

<tr> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
    <td class="hidden"><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div></td> 
</tr> 
</table>

Quelle

2009-10-29 14:45:51 cletus

Das hat es getan. Vielen Dank dafür und das, was von meinen Haaren übrig geblieben ist! Ich schätze, ich muss etwas mehr über meine CSS lesen. – canadiancreed

Es ist ein ziemlich geheimnisvoller Aspekt zu CSS. Das einzige Mal, wenn jemand es herausfindet, ist, wenn sie genau dieses Problem haben. Glaub mir, war da drüben. – cletus

CSS 2.1 sagt, dass 'Überlauf 'auf Tabellenzellen funktioniert. In Wirklichkeit unterstützt jedoch nur WebKit Scrollen auf Zellen. 'versteckt' funktioniert aber OK. – bobince

-1

nicht sicher, ob es nicht sollte für Tabellenzellen zu arbeiten, sondern im Idealfall wollen Sie nicht wirklich, sie trotzdem verstecken. Ich schlage vor, Sie lange Wörter Silbentrennung, die Sie mit dem folgenden lib leicht tun können (nur nehmen einige Zeilen js zu implementieren):

http://code.google.com/p/hyphenator/

Beispiel:

http://hyphenator.googlecode.com/svn/tags/Version%202.2.0/WorkingExample.html

Quelle

2009-10-29 14:46:05

Ich dachte an etwas Ähnliches, aber leider ist diese Designentscheidung nicht meine Sache. – canadiancreed

<html> 
<head> 
<style> 
td { width: 33%; height: 2em; } 
td div { width:100%;height:100%;overflow:hidden } 
</style> 

</head> 

<body> 

<table border="1" style="width:300px;"> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>this is going to be hidden because it is too long</div></td><td>z</td></tr> 
<tr><td>x</td><td><div>y</div></td><td>z</td></tr> 
</table> 

</body> 

</html>

Quelle

2009-10-29 14:55:34 bugtussle

Standardmäßig erweitert der automatische Tabellenlayoutmechanismus die Tabellenbreite auf die minimale Zelleninhaltsbreite. Sagen Sie ihm nicht, dass mit der table-layout Eigenschaft zu tun:

<table width="100%" style="table-layout: fixed">

und Ihr Beispiel funktioniert wie erwartet. Sie sollten wahrscheinlich auch die width: 100px aus den Tabellenzellen entfernen, da dies in Kombination mit einer 100% -Breite-Tabelle keinen Sinn macht. (Obwohl mit festem Tabellenlayout spielt es keine Rolle, da nur die erste Zeile von Zellen oder <col> s hat keinen Einfluß auf den Spaltenbreiten.)

Hinweis overflow: scroll oder auto nicht für Tabellenzellen in den meisten Browsern funktioniert. (Es tut in WebKit.)

Quelle

2009-10-29 15:07:51 bobince

"Table-Layout: behoben" ändert nichts. Die Höhe wird immer größer. Getestet auf Chrome, das Webkit ist – matteo

Überlauf: Versteckte funktioniert nicht bei der Verwendung von Tabellen

Antwort

Verwandte Themen