Warum funktioniert CSS td width nicht?

Question

Bitte sehen diese JSFIDDLE

td.rhead { width: 300px; } 

Warum funktioniert die CSS Breite Arbeit?

<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> 

Auch, was sind die Auswirkungen der Position: feste, absolute etc haben auf TD Breiten, wenn überhaupt? Ich suche nach mehr als nur nach einem Grund. Ich hoffe zu verstehen, wie es funktioniert.

Answer 1

Dies ist möglicherweise nicht das, was Sie hören möchten, aber display: table-cell respektiert die Breite nicht und wird basierend auf der Breite der gesamten Tabelle reduziert. Sie können ganz einfach nur dies umgehen, indem du Dich, deren Breite innerhalb der Tabellenzelle ein display: block Element angeben, zB

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

Dies sollte nicht viel Unterschied machen, wenn die <table> selbst position: fixed oder absolut ist, weil die Position der Zellen sind alle statisch relativ zur Tabelle.

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

EDIT: Ich kann nicht Kredit nehmen, aber da die Kommentare sagen können Sie nur min-width stattdessen statt width auf die Tabellenzelle verwenden.

Answer 2

diese es Arbeit versuchen.

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

Answer 3

Der Grund ist es nicht in der Verbindung ist Ihr vorgesehen funktioniert, weil Sie eine 300px Spalte angezeigt werden versuchen PLUS 52 Spalten die Spannweite 7 Spalten jeweils. Verkleinere die Anzahl der Spalten und es funktioniert. Sie können nicht so viele auf dem Bildschirm anpassen.

Wenn Sie die Spalten erzwingen wollen versuchen Einstellung passen:

body {min-width:4150px;} 

siehe meine jsfiddle: http://jsfiddle.net/Mkq8L/6/ @ Mike Ich kann noch nicht sagen.

Answer 4

können Sie auch:

.rhead { 
    width:300px; 
} 

aber dies wird nur mit mit einigen Browsern, wenn ich mich richtig erinnere hat IE8 dies nicht zulassen. Über allem ist es sicherer, das width="" Attribut in das <td> selbst zu setzen.

Answer 5

Der Grund ist, weil Sie nicht die Breite der Tabelle angegeben haben, und Ihre ganze Reihe von TDs sind überfüllt.

This for example, ich habe die Tabelle eine Breite von 5000px gegeben, die ich dachte, würde Ihren Anforderungen entsprechen.

Es ist genau der gleiche Code, den Sie angegeben haben, den ich nur in der Tabellenbreite hinzugefügt habe.

Ich glaube, was passiert, ist, weil Ihre TD's weit über die Standard-Tabellenbreite sind. Was Sie sehen könnten, wenn Sie etwa 45 Ihrer tds in jedem tr herausziehender Code, den Sie in Ihrer Frage zur Verfügung gestellt, jsfiddle nicht) funktioniert es genau feine

Answer 6

Meine verrückte Lösung.)

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

Answer 7

Versuchen

table { 
    table-layout: auto; 
} 

Wenn Sie Bootstrap verwenden verwenden, Klasse table hat durch Standard.

Answer 8

Du bist besser dran table-layout: fixed

Auto verwendet, ist der Standardwert und mit großen Tabellen können ein bisschen von Client-Seite liegt, wie der Browser durchläuft es dazu führen, alle Größen zu überprüfen passen.

Fixed ist viel besser und macht schneller auf der Seite. Die Struktur der Tabelle hängt von der Gesamtbreite der Tabellen und der Breite jeder Spalte ab.

Hier ist es auf das ursprüngliche Beispiel angewendet: JSFIDDLE, Sie werden feststellen, dass die verbleibenden Spalten zerkleinert sind und ihren Inhalt überlappen. Wir können das in Ordnung bringen mit etwas mehr CSS (alles, was ich zu tun hatte, ist eine Klasse zum ersten TR hinzugefügt werden):

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

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

    td.rhead { 
     width: 300px 
    } 

hier in Aktion gesehen: JSFIDDLE

Answer 9

Wenn Tabellenbreite zum Beispiel 100 %, versuchen Sie eine prozentuale Breite von td wie 20%.

Answer 10

Verwenden Sie die Tabellenlayout-Eigenschaft und den "festen" Wert für Ihre Tabelle.

Nachdem Sie die gesamte Breite der Tabelle eingerichtet haben, können Sie jetzt die Breite in% der TDs einrichten.

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

Sie können mehr über in auf diesen Link erfahren: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 11

Wrap Inhalt aus der ersten Zelle in div z.B. wie folgt aus:

HTML:

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

CSS:

.rhead { 
    width: 300px; 
} 

Hier ist ein jsfiddle.