it-swarm.it

Come posso limitare la larghezza della colonna della tabella?

Una delle colonne nella mia tabella può contenere un testo lungo senza spazi vuoti. Come posso limitare la sua larghezza a, ad esempio, 150 px? Non voglio che sia sempre 150px (se è vuoto dovrebbe essere stretto), ma se c'è un testo lungo voglio che sia limitato con 150px e il testo da avvolgere.

Ecco un esempio di test: http://jsfiddle.net/Kh378/ (limitiamo la 3a colonna).

Grazie in anticipo.

Aggiornare:
Impostazione di questi stili:

Word-wrap: break-Word;
max-width: 150px;

non funziona in IE8 (testato su computer diversi) e suppongo che non funzioni in nessuna versione di IE.

54
nightcoder

Aggiornato

Sui tag td e th ho aggiunto:

Word-wrap: break-Word;
max-width: 150px;

Non completamente compatibile in tutti i browser, ma un inizio.

58
Brandon

Hai invece bisogno di usare la larghezza.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>                
            <th style="width: 150px;"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

Ma solo nella sezione <thead>.

5
Carlos Toledo

Dovresti essere in grado di personalizzare la colonna con:

max-width: 150px; 
Word-wrap: break-Word;

Tieni presente che Word-wrap è supportato in IE browser con versione 5.5+, Firefox 3.5+ e WebKit (Chrome e Safari).

3
isNaN1247

Dopo alcuni esperimenti su Chrome, sono arrivato a quanto segue:

  • se la tua tabella ha un <th> che dovrebbe avere un set "width" o "max-width" 
  • il <td> deve aver impostato "max-width" e "Word-wrap: break-Word;"

Se si utilizza una "larghezza" nel <th>, verrà utilizzato il suo valore. Se si utilizza un "max-width" nel <th> viene utilizzato il valore "max-width" del <td> 's.

Quindi questa funzionalità è abbastanza complessa. E non ho nemmeno studiato tavoli senza intestazioni o senza stringhe lunghe che hanno bisogno di una "parola di rottura".

2
user2587656

è molto facile

Potresti aggiungere attributi come questi

larghezza massima 

altezza massima 

Possono essere impostati in html come attributo o in CSS come stile

1
Kano

c'è un'opzione per simulare la larghezza massima:

simulateMaxWidth: function() {
    this.$el.find('th').css('width', ''); // clear all the width values for every header cell
    this.$el.find('th').each(function(ind, th) {
        var el = $(th);
        var maxWidth = el.attr('max-width');
        if (maxWidth && el.width() > maxWidth) {
            el.css('width', maxWidth + 'px');
        }
    });
}

questa funzione può essere richiamata su $ (window) .on ('ridimensiona', ...) più volte

this.$el

rappresenta l'elemento genitore, nel mio caso ho una marionetta

per quegli elementi che dovrebbero avere larghezza massima, dovrebbe esserci un attributo di larghezza massima come:

<th max-width="120">
0
user2846569

1) Specifica la larghezza per ogni colonna in <th> secondo le tue necessità.

2) Aggiungi il ritorno a capo di ogni <td> in <tr> di <table>.

Word-wrap: break-Word;
0
Amay Kulkarni