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.

<table border="1" width="360" style="table-layout:Fixed;">
	<tr>
		<td width="120">
		<div style="overflow: hidden;"><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></div></td>
		<td width="120">
		<div style="overflow: hidden;"><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></div></td>
		<td width="120">
		<div style="overflow: hidden;"><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></div></td>
	</tr>
</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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>cellából ne lógjon túl</title>
  <style type="text/css">
    table {
      border-collapse: collapse;
      width: 360px;
      table-layout: fixed;
    }
    table tr {
      white-space: nowrap;
    }
    table td {
      width: 120px;
      overflow: hidden;
      white-space: nowrap;
    }
  </style>
</head>
<body>
<table summary="">
  <tbody>
    <tr> <!-- IE Részére -->
      <td><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>
      <td><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>
      <td><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>
    </tr>
    <tr> <!-- Minden más jól kezeli -->
      <td>aaaaaaaaaa bbbbbbbbbb cccccccccd</td>
      <td>aaaaaaaaaa bbbbbbbbbb cccccccccd</td>
      <td>aaaaaaaaaa bbbbbbbbbb cccccccccd</td>
    </tr>
  </tbody>
</table>
</body>
</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:

<table border="0" width="360" style="table-layout: fixed; ">
	<tr>
		<td style="overflow: hidden; "><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>
		<td style="overflow: hidden; "><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>
		<td style="overflow: hidden; "><nobr>aaaaaaaaaa bbbbbbbbbb cccccccccd</nobr></td>
	</tr>
</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.