Allora, vediamo di fare un po' di teoria:
Una Table ha di default il comportamento che tu già conosci, ovvero quello di determinare la larghezza delle proprie colonne in modo dinamico, cercando di rispettare le impostazioni richieste (larghezza della tabella, larghezza delle colonne, eccetera) ma adattandole comunque al contenuto. Se come nel tuo caso non ci sono spazi per poter andare a capo, la larghezza della colonna si amplierà a dismisura, oltre la larghezza impostata.
Per fortuna è possibile modificare questo comportamento con lo stile
codice:
table-layout: fixed;
In questo modo otteniamo il rispetto delle dimensioni volute. Quindi utilizzeremo sia per la tabella che per la colonna lo stile
se vogliamo una larghezza di 100 pixel.
Attenzione però che nel caso di più colonne non tutti i browser interpretano la nostra richiesta nello stesso modo. In particolare, in Internet Explorer, l'impostazione della larghezza delle colonne prevale sull'impostazione della larghezza della tabella. Ad esempio, tre colonne (da 100 px) producono una tabella da 300 px. Altri browser fanno prevalere la larghezza della tabella, ma necessariamente forzano la larghezza delle colonne ad essere minore di quella da noi impostata.
La soluzione è semplice: se in effetti è la larghezza della tabella che vogliamo preservare, basta impostare le colonne col seguente stile
codice:
max-width: 100px;
In questo modo anche Internet explorer manterrà una larghezza di tabella di 100px e ridurrà se necessario la larghezza delle colonne, che comunque non potranno superare i 100 pixel di larghezza.
Inoltre, per evitare che il contenuto della cella "straripi" oltre la cella stessa, è importante aggiungere alle colonne lo stile:
codice:
overflow: hidden;
Qui di seguito l'esempio completo, dove ho messo tre tabelle per verificare il comportamento nel caso di più colonne.
codice:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Prova colonne a dimensione fissa</title>
<style type="text/css">
.tbl {
table-layout: fixed;
border: 1px solid black;
border-collapse: collapse;
background: #e6e6e6;
width: 100px;
}
.tbl td {
border: 1px solid black;
overflow: hidden;
max-width: 100px;
}
</style>
</head>
<body>
<table class="tbl">
<tr>
<td>testolunghissimissimissimissimissimissimissimissimissimissimo!</td>
</tr>
</table>
<table class="tbl">
<tr>
<td>testolunghissimissimissimissimissimissimissimissimissimissimo!</td>
<td>case</td>
</tr>
</table>
<table class="tbl">
<tr>
<td>testolunghissimissimissimissimissimissimissimissimissimissimo!</td>
<td>case</td>
<td>palazzi</td>
</tr>
</table>
</body>
</html>
Ultima cosa da aggiungere: sarebbe opportuno incorporare il testo all'interno di uno span in cui impostare la proprietà "title" al medesimo testo. In questo modo il passaggio del mouse sopra la cella contenente il testo (troncato per mancanza di spazio) mostrerebbe un tooltip col contenuto completo del testo.
Rispondi quotando
