ugrás a tartalomhoz

cellából ne lógjon túl

domel · 2009. Már. 13. (P), 16.48
Hi!
Egy olyan táblára lenne szükségem, aminek a celláiból kilóghat a szöveg, ami kilóg belőle az tünjön el, eközben a cella mérete se változzon meg, és több szó esetén ne tördelje sorokra.
  1. <table border="1" width="360" style="table-layout:Fixed;">  
  2.     <tr>  
  3.         <td width="120">  
  4.         <div style="overflow: hidden;"><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></div></td>  
  5.         <td width="120">  
  6.         <div style="overflow: hidden;"><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></div></td>  
  7.         <td width="120">  
  8.         <div style="overflow: hidden;"><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></div></td>  
  9.     </tr>  
  10. </table>  
Egy órán keresztül szórakoztam vele, és mikor a div-ekhez értem, már úgy éreztem, hogy gányolás az egész. A fenti kódot meglehet csinálni szebben? Divek nélkül?
‹ Javascript tömb küldése php-nek ajaxal Tabella készítés ›
 ■
1

Próbálkozás

Poetro · 2009. Már. 13. (P), 17.42
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
  3. <head>  
  4.   <title>cellából ne lógjon túl</title>  
  5.   <style type="text/css">  
  6.     table {  
  7.       border-collapse: collapse;  
  8.       width: 360px;  
  9.       table-layout: fixed;  
  10.     }  
  11.     table tr {  
  12.       white-space: nowrap;  
  13.     }  
  14.     table td {  
  15.       width: 120px;  
  16.       overflow: hidden;  
  17.       white-space: nowrap;  
  18.     }  
  19.   </style>  
  20. </head>  
  21. <body>  
  22. <table summary="">  
  23.   <tbody>  
  24.     <tr> <!-- IE Részére -->  
  25.       <td><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>  
  26.       <td><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>  
  27.       <td><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>  
  28.     </tr>  
  29.     <tr> <!-- Minden más jól kezeli -->  
  30.       <td>aaaaaaaaaa bbbbbbbbbb cccccccccd</td>  
  31.       <td>aaaaaaaaaa bbbbbbbbbb cccccccccd</td>  
  32.       <td>aaaaaaaaaa bbbbbbbbbb cccccccccd</td>  
  33.     </tr>  
  34.   </tbody>  
  35. </table>  
  36. </body>  
  37. </html>  
2

jee

domel · 2009. Már. 13. (P), 19.24
Nem rossz! Először nem tudtam mire vélni a dolgot, mert mindhárom böngészőben (IE8,FF,O) jól jelent meg mindkét sor, de rájöttem, hogy IE6-ban van a különbség :)
A tied és enyémből aztán összebarkácsoltam a végleges formát:
  1. <table border="0" width="360" style="table-layout: fixed; ">  
  2.     <tr>  
  3.         <td style="overflow: hidden; "><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>  
  4.         <td style="overflow: hidden; "><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>  
  5.         <td style="overflow: hidden; "><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>  
  6.     </tr>  
  7. </table>  
A <nobr> azért nem került a stílusba, hogy az összes böngészőben jó legyen. Amúgy meg valószínüleg az IE6-osok kapnak egy képernyőt, ahol elküldöm őket melegebb éghajlatra, mert különben még a png képekkel is szívok.

Köszi a gyors választ!
Domel
3

<nobr>

Ustak · 2009. Már. 13. (P), 21.21
Rettentően égő, de most néztem utána, hogy létezett (a w3school-on már nem találtam) ilyen tag. 5 éve foglalkozom webes dolgokkal, és soha soha nem hallottam erről a tagról.
Fantasztikus.