Utilizzando CSS td larghezza assoluta, posizione

Si prega di consultare questo JSFIDDLE

td.rhead { width: 300px; }

Perché la larghezza CSS non funziona?

<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: fissa, assoluta ecc. Sulle larghezze td se ce ne sono? Sto cercando una ragione più che una soluzione. Spero di capire come funziona.

Potrebbe non essere quello che vuoi sentire, ma display: table-cellnon rispetta la larghezza e verrà compresso in base alla larghezza dell'intera tabella. Puoi aggirare questo problema facilmente semplicemente avendo un display: blockelemento all'interno della cella della tabella stessa di cui specifichi la larghezza, ad es

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

Questo non dovrebbe fare molta differenza se lo <table>stesso è position: fixedo assoluto perché la posizione delle celle sono tutte statiche rispetto alla tabella.

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

EDIT: non posso prendermi il merito, ma come dicono i commenti puoi semplicemente usare min-widthinvece che widthsulla cella della tabella.

Stai meglio usando table-layout: fixed

Auto è il valore predefinito e con tabelle di grandi dimensioni può causare un po 'di ritardo sul lato client mentre il browser lo scorre per verificare che tutte le dimensioni si adattino.

Risolto è di gran lunga migliore e rende più veloce la pagina. La struttura della tabella dipende dalla larghezza complessiva delle tabelle e dalla larghezza di ciascuna delle colonne.

Qui viene applicato all'esempio originale: JSFIDDLE , Noterai che le colonne rimanenti sono schiacciate e si sovrappongono al loro contenuto. Possiamo risolverlo con un po 'più 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

Il motivo per cui non funziona nel collegamento fornito è perché stai cercando di visualizzare una colonna di 300 px PIÙ 52 colonne di 7 colonne ciascuna. Riduci il numero di colonne e funziona. Non puoi metterne così tanti sullo schermo.

Se vuoi forzare l'adattamento delle colonne, prova l'impostazione:

body {min-width:4150px;}

vedi il mio jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike Non posso ancora commentare.

Il motivo è che non hai specificato la larghezza della tabella e tutto il tuo gruppo di td sta traboccando.

Ad esempio , ho dato alla tabella una larghezza di 5000 px, che pensavo si adattasse alle tue esigenze.

table{
    width:5000px;
}

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

Credo che quello che sta succedendo sia perché i tuoi TD sono ben oltre la larghezza della tabella predefinita. Cosa che potresti vedere, se estrai circa 45 dei tuoi td in ogni tr, (cioè il codice che hai fornito nella tua domanda, non jsfiddle) funziona esattamente bene

Prova questo funziona.

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

Prova ad usare

table {
  table-layout: auto;
}

Se usi Bootstrap, la classe tableha table-layout: fixed;per impostazione predefinita.

Usa la proprietà table-layout e il valore "fixed" sulla tua tabella.

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

Dopo aver impostato l'intera larghezza della tabella, ora puoi impostare la larghezza in% delle td.

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

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

La mia pazza soluzione.)

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

Se la larghezza della tabella è ad esempio 100%, prova a utilizzare una larghezza percentuale su td come 20%.

Avvolgi il contenuto della prima cella in div, ad esempio in questo modo:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Ecco un jsfiddle .

Puoi anche usare:

.rhead {
    width:300px;
}

ma questo funzionerà solo con alcuni browser, se ricordo bene IE8 non lo consente. Nel complesso, è più sicuro mettere l' width=""attributo in <td>se stesso.