Perché la larghezza td del CSS non funziona?

Question

consulta questo JSFIDDLE

td.rhead { width: 300px; } 

Perché non funziona la larghezza CSS?

<table> 
<thead> 
<tr> 
<td class="rhead">need 300px</td> 
<td colspan="7">Week #0</td> 
<td colspan="7">Week #1</td> 
<!-- etc..--> 
</tr> 
<tr> 
<td class="rhead"></td> 
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td> 
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td> 
<!-- etc... --> 
</tr> 
<thead> 
</table> 

Inoltre, quali sono gli effetti della posizione: fissi, assoluti ecc hanno sulla larghezza td se presente? Sto cercando una ragione più che una soluzione. Spero di capire come funziona.

Answer 1

Questo potrebbe non essere ciò che si desidera ascoltare, ma display: table-cell non rispetta la larghezza e verrà compresso in base alla larghezza dell'intera tabella. È possibile ottenere intorno a questo facilmente solo avendo un elemento display: block all'interno della cella tabella stessa la cui larghezza si specifica, ad esempio

<td><div style="width: 300px;">wide</div></td> 

Questo non dovrebbe fare molta differenza se la stessa è <table>position: fixed o assoluto perché la la posizione delle celle è statica rispetto alla tabella.

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

EDIT: Non posso prendere credito, ma come dicono i commenti si può semplicemente utilizzare min-width invece di width sulla cella della tabella, invece.

Answer 2

Prova questo lavoro.

<table> 
<thead> 
<tr> 
<td width="300">need 300px</td> 

Answer 3

Il motivo per cui non funziona nel tuo link fornito è perché si sta tentando di visualizzare una colonna 300px PLUS 52 colonne della campata 7 colonne ciascuna. Riduci il numero di colonne e funziona. Non puoi adattare così tanti sullo schermo.

Se si vuole forzare le colonne per adattarsi impostazione prova:

body {min-width:4150px;} 

veder la mia jsfiddle: http://jsfiddle.net/Mkq8L/6/ @ Mike non posso commentare ancora.

Answer 4

È anche possibile utilizzare:

.rhead { 
    width:300px; 
} 

ma questo sarà solo con con alcuni browser, se non ricordo male IE8 non consente questo. Oltre tutto, è più sicuro inserire l'attributo width="" nello stesso <td>.

Answer 5

Il motivo è perché non è stata specificata la larghezza della tabella e l'intero gruppo di td sta traboccando.

This for example, ho dato al tavolo una larghezza di 5000 px, che ho pensato sarebbe adatto alle vostre esigenze.

table{ 
    width:5000px; 
} 

È lo stesso codice che hai fornito, che ho semplicemente aggiunto nella larghezza della tabella.

Credo che quello che sta succedendo sia perché i TD superano la larghezza della tabella predefinita. Che si potrebbe vedere, se si estrae circa 45 dei tuoi td in ogni tr, (ad es.il codice che hai fornito nella sua interrogazione, non jsfiddle) funziona esattamente bene

Answer 6

mia soluzione pazzo.)

$(document).ready(function() { 
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>"; 
    $(this).html(htmlText); 
    }); 
}); 

Answer 7

Prova utilizzando

table { 
    table-layout: auto; 
} 

Se si utilizza Bootstrap, classe table ha da predefinito.

Answer 8

È meglio utilizzare table-layout: fixed

Auto è il valore di default e con grandi tavoli possono causare un po 'di ritardo lato client, come i itera del browser attraverso di essa per controllare tutti i formati misura.

Corretto è molto meglio e rende più veloce la pagina. La struttura della tabella dipende dalla larghezza complessiva delle tabelle e dalla larghezza di ciascuna colonna.

Qui viene applicato all'esempio originale: JSFIDDLE, Si noterà che le colonne rimanenti sono schiacciate e si sovrappongono al loro contenuto. Possiamo risolvere che con un po 'di CSS (tutto quello che ho dovuto fare è aggiungere una classe al primo TR):

table { 
     width: 100%; 
     table-layout: fixed; 
    } 

    .header-row > td { 
     width: 100px; 
    } 

    td.rhead { 
     width: 300px 
    } 

Visto in azione qui: JSFIDDLE

Answer 9

Se larghezza della tabella è per esempio 100 %, prova a usare una larghezza percentuale su td come 20%.

Answer 10

Usa la proprietà di layout di tabella e il valore "fisso" sul tuo tavolo.

table { 
    table-layout: fixed; 
    width: 300px; /* your desired width */ 
} 

Dopo aver impostato l'intera larghezza della tabella, è ora possibile impostare la larghezza in% di td's.

td:nth-child(1), td:nth-child(2) { 
    width: 15%; 
} 

È possibile saperne di più su in su questo link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 11

contenuti Wrap dalla prima cella div esempio così:

HTML:

<td><div class="rhead">a little space</div></td> 

CSS:

.rhead { 
    width: 300px; 
} 

Ecco un jsfiddle.