Adatta la larghezza della cella al contenuto

266

Dato il seguente markup, come potrei usare CSS per forzare una cella (tutte le celle nella colonna) per adattarsi alla larghezza del contenuto al suo interno piuttosto che allungare (qual è il comportamento predefinito)?

<style type="text/css">
td.block
{
border: 1px solid black;
}
</style>
<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

EDIT: mi rendo conto che potrei codificare a fondo la larghezza, ma preferirei non farlo, poiché il contenuto che andrà in quella colonna è dinamico.

Guardando l'immagine qui sotto, la prima immagine è ciò che produce il markup. La seconda immagine è ciò che voglio.

inserisci qui la descrizione dell'immagine

html css html-table

— Mansfield
fonte

Non capisco la tua domanda. Vuoi limitare l'ultima colonna a una larghezza specifica?

— MetalFrog,

8

@diEcho Ho pensato che fosse abbastanza chiaro. Aggiungerò una o due foto.

— Mansfield,

Possibile duplicato dell'autowidth della colonna della tabella CSS

— Vadzim,

451

Non sono sicuro di aver compreso la tua domanda, ma mi prenderò una mano. JSfondo dell'esempio .

HTML:

<table style="width: 100%;">
<tr>
    <td class="block">this should stretch</td>
    <td class="block">this should stretch</td>
    <td class="block">this should be the content width</td>
</tr>
</table>

CSS:

td{
    border:1px solid #000;
}

tr td:last-child{
    width:1%;
    white-space:nowrap;
}

— MetalFrog
fonte

3

perché scrivi <table style="width:100%">invece di<table width="100%" >

— diEcho il

17

@diEcho Non ho scritto quella parte, che era dal codice di esempio. Indipendentemente da ciò, è una cattiva pratica usare l'attributo width sugli elementi. In questo rapido esempio, il CSS inline va bene, ma dovrebbe essere estratto in un file se questo era un codice a livello di produzione.

— MetalFrog,

45

Un modo più pulito per fare questo IMO sarebbe definire uno stile chiamato "nostretch" (o qualcosa del genere), e quindi definire semplicemente nostretch nel CSS per avere larghezza: 1% e il nowrap. Quindi l'ultimo TD avrebbe 'class = "nostretch block"'. In questo modo puoi "nostretch" qualsiasi cella desideri.

— Tim Holt,

3

Questa è una buona soluzione, ma purtroppo in Bootstrap 3 i miei gruppi di pulsanti andranno a finire da questo: jsfiddle.net/wexdX/326 Qualche idea su come posso eliminarla?

— Martin Braun,

5

Funziona solo quando il contenuto è più largo della larghezza: 1% - giusto? Perché se il contenuto è più piccolo della larghezza: 1%, la cella sarà più grande.

— Adam,

44

Ambientazione

max-width:100%;
white-space:nowrap;

risolverà il tuo problema.

— Shubham Nigam
fonte

8

Per me, questo è il miglior adattamento automatico e ridimensionamento automatico per la tabella e le sue colonne (usa css! Important ... solo se non puoi senza)

.myclass table {
    table-layout: auto !important;
}

.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th {
    width: auto !important;
}

Non specificare la larghezza del CSS per la tabella o per le colonne della tabella. Se il contenuto della tabella è più grande, verrà visualizzato su dimensioni dello schermo.

— myset
fonte

3

Impostare la larghezza CSS su 1% o 100% di un elemento in base a tutte le specifiche che ho potuto scoprire è correlato al genitore. Anche se Blink Rendering Engine (Chrome) e Gecko (Firefox) al momento della scrittura sembrano gestire bene l'1% o il 100% (ridurre le colonne o una colonna per riempire lo spazio disponibile), non è garantito in base a tutte le specifiche CSS Ho potuto trovare per renderlo correttamente.

Un'opzione è quella di sostituire la tabella con div div CSS4:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Funziona con i nuovi browser, cioè IE11 + vedi tabella in fondo all'articolo.

— Mladen Adamovic
fonte

1

Ci sono molti modi per farlo!

correggimi se sbaglio, ma la domanda è alla ricerca di questo tipo di risultato.

<table style="white-space:nowrap;width:100%;">
<tr>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:50%">this should stretch</td>
<td class="block" style="width:auto">this should be the content width</td>
</tr>
</table>

I primi 2 campi "condivideranno" la pagina rimanente (NOTA: se aggiungi più testo a uno dei campi del 50%, occuperà più spazio) e l'ultimo campo dominerà costantemente la tabella.

Se sei felice di lasciare che il testo sia a capo, puoi spostare lo spazio bianco: nowrap; allo stile del terzo campo
sarà l'unico modo per iniziare una nuova linea in quel campo.

in alternativa, è possibile impostare una lunghezza sull'ultimo campo, ad es. larghezza: 150px e lascia la percentuale sui primi 2 campi.

Spero che questo ti aiuti!

— Christian Newman
fonte

-1

Semplice:

    <div style='overflow-x:scroll;overflow-y:scroll;width:100%;height:100%'>

— Parth Jani
fonte