Mit CSS td width absolute Position

Bitte beachten Sie diese JSFIDDLE

td.rhead { width: 300px; }

Warum funktioniert die CSS-Breite nicht?

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

Welche Auswirkungen hat die Position: Fest, Absolut usw. auf die Breite, falls vorhanden? Ich suche einen Grund mehr als eine Lösung. Ich hoffe zu verstehen, wie es funktioniert.

Dies ist möglicherweise nicht das, was Sie hören möchten, display: table-cellberücksichtigt jedoch nicht die Breite und wird basierend auf der Breite der gesamten Tabelle reduziert. Sie können dies leicht umgehen, indem Sie ein display: blockElement in der Tabellenzelle selbst haben, dessen Breite Sie angeben, z

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

Dies sollte keinen großen Unterschied machen, ob das <table>selbst position: fixedoder absolut ist, da die Position der Zellen alle statisch relativ zur Tabelle ist.

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

EDIT: Ich kann keine Gutschrift annehmen, aber wie die Kommentare sagen, können Sie min-widthstattdessen nur anstelle widthder Tabellenzelle verwenden.

Du bist besser dran table-layout: fixed

Auto ist der Standardwert und kann bei großen Tabellen zu einer gewissen Verzögerung auf der Clientseite führen, wenn der Browser ihn durchläuft, um zu überprüfen, ob alle Größen passen.

Behoben ist weitaus besser und rendert schneller zur Seite. Die Struktur der Tabelle hängt von der Gesamtbreite der Tabelle und der Breite jeder Spalte ab.

Hier wird es auf das ursprüngliche Beispiel angewendet: JSFIDDLE , Sie werden feststellen, dass die verbleibenden Spalten zerquetscht sind und ihren Inhalt überlappen. Wir können das mit etwas mehr CSS beheben (alles was ich tun musste, ist eine Klasse zum ersten TR hinzuzufügen):

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

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

    td.rhead {
        width: 300px
    }

Hier in Aktion gesehen: JSFIDDLE

Der Grund, warum es in dem von Ihnen bereitgestellten Link nicht funktioniert, ist, dass Sie versuchen, eine 300px-Spalte PLUS 52 Spalten mit jeweils 7 Spalten anzuzeigen. Verkleinern Sie die Anzahl der Spalten und es funktioniert. Sie können nicht so viele auf den Bildschirm bringen.

Wenn Sie die Anpassung der Spalten erzwingen möchten, versuchen Sie Folgendes:

body {min-width:4150px;}

siehe meine jsfiddle: http://jsfiddle.net/Mkq8L/6/ @mike Ich kann noch keinen Kommentar abgeben.

Der Grund dafür ist, dass Sie die Breite der Tabelle nicht angegeben haben und Ihre gesamte Anzahl von td's überläuft.

Zum Beispiel habe ich der Tabelle eine Breite von 5000px gegeben, von der ich dachte, dass sie Ihren Anforderungen entspricht.

table{
    width:5000px;
}

Es ist genau derselbe Code, den Sie angegeben haben und den ich lediglich in der Tabellenbreite hinzugefügt habe.

Ich glaube, was passiert, ist, dass Ihre TDs weit über die Standardtabellenbreite hinausgehen. Was Sie sehen könnten, wenn Sie ungefähr 45 Ihrer td's in jedem tr herausziehen (dh den Code, den Sie in Ihrer Frage angegeben haben, nicht jsfiddle), funktioniert es genau einwandfrei

Versuchen Sie dies, es funktioniert.

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

Versuchen zu benutzen

table {
  table-layout: auto;
}

Wenn Sie Bootstrap verwenden, Klasse tablehat table-layout: fixed;standardmäßig.

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

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

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

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

Weitere Informationen finden Sie unter diesem Link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Meine verrückte Lösung.)

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

Wenn die Tabellenbreite beispielsweise 100% beträgt, versuchen Sie, eine prozentuale Breite für td zu verwenden, z. B. 20%.

Wickeln Sie den Inhalt der ersten Zelle in div ein, z. B. so:

HTML:

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

CSS:

.rhead {
  width: 300px;
}

Hier ist eine jsfiddle .

Sie können auch verwenden:

.rhead {
    width:300px;
}

Dies ist jedoch nur bei einigen Browsern der Fall, wenn ich mich richtig erinnere, dass IE8 dies nicht zulässt. Insgesamt ist es sicherer, das width=""Attribut einfach in sich <td>selbst zu setzen.