Warum TD width funktioniert nicht oder nicht befolgt?
Ursprünglichen Frage: ist der HTML - <table>
haben eine Standard-Breite?
Vor kurzem jemand gefragt, eine Frage, irgendwo entlang dieser Linien, und hat mich gefragt.
Nehmen Sie dies zum Beispiel.
In diesem fiddle, wenn Sie waren zu überprüfen, die Breite (ich bin mit element untersuchen von chrome), es zeigt 100px
, wie beabsichtigt funktioniert.
Können hinzufügen, ein paar mehr "td"s aus, und wir werden sehen, dass die "td:100px
" css ignoriert wird.
Wie Sie sehen können, jetzt ist es 83px statt 100px
als ursprünglich vorgesehen.
Aber sagen wir mal so, ich bewege mich zurück zu weniger TD ' s (7), und ich in einer größeren Breite für jedes TD-element (500 Pixel), das Ergebnis ist, dass die Breite der td bekommt am stecken 119px
.
Schließlich, lassen Sie uns sagen, ich habe eine Tabelle von 2000px Breite, und td 100px
Breite, und viele td-Elementen.
http://jsfiddle.net/rqmNY/7/
Nun die Breite der Tabelle überschreibt, TD width, und erweitert die td ' s Breite zu 222px
.
Kann jemand erklären Sie dieses Verhalten?
p.s. Beachten Sie, dass in allen Fällen, element untersuchen-tool sagt mir, dass die Breite immer entsprechend der css, es ist nur das Endergebnis nicht korrekt angezeigt.
- warum nicht einfach den Stil, die Breite entsprechend, anstatt auto?
- Sie könnten versuchen. Ich habe versucht, das styling der Breite der Tabelle auf ein bestimmtes pixel, aber es ist der ähnliche Fall
Du musst angemeldet sein, um einen Kommentar abzugeben.
Haben Sie versucht, indem
display:inline-block
zu Ihrem TD CSS? Das zwingt den browser, nicht ignorieren Ihre TD width.Ich sehr glaube, die Antwort auf diese Frage ist so:
Die Priorität von breiten, die Auswirkungen auf die TD ist
Table Width
Eltern-Element Breite (und wenn keiner, Viewport)
Element(TD) Breite.
Daher, wenn die Breite der Tabelle festgelegt ist, wird die TD ' s IMMER anpassen, um die Breite der Tabelle. Jedoch, wenn die Breite nicht gesetzt ist, wird die "main" width wird die wahre Breite des Viewports. Es sei denn, der CSS-code sieht etwas anderes, das stimmt. Und nur, wenn die Gesamtbreite der TD ' s ist kleiner als der viewport, der elementar-Breite berücksichtigt werden.
Bearbeiten
Tabellenbreite Vorrang TD width.
Erklärte TD width wird nur befolgt werden, bis es mehr als viewport-Breite, - und viewport-Breite wird als Priorität.
min-width
auf td Vorrang vor Tisch BreiteEigentlich die Breite der Tabelle richtet sich auf die Zelle, die die Breite, wenn Sie nicht geben Sie die Breite der Tabelle. Aber wenn Sie angeben, dass die Breite der Tabelle wird es ignorieren td width. Betrachten wir das folgende Beispiel:
Wenn Sie
dann die Breite der Tabelle wird
1000px
.Aber wenn Sie
er ignoriert die
<td>
Breite und die Breite der Tabelle wird500px
.tr
s und einemtd
in jedem von Ihnen. Das heißt nicht, dass zwei Spalten, macht es zwei Zeilen mit einer Zelle jede.Gemäß der w3 Docs Hier heißt Es "In Ermangelung einer Breite Spezifikation, Tabelle, Breite wird ermittelt, indem der user-agent."
Was ich denken kann ist es td Breite ist immer abhängig von der Tischbreite. Wenn Sie Sie angeben oder nicht. Wenn Sie eine Tabelle mit Breite
500px
und 2 TDs mit Breite200px
jeder. Jetzt, nach dem hinzufügen dieser 2 TDs in der Tabelle gibt es100px
noch Platz für so50px
jedem Hinzugefügt werden, um sowohl die TDs überschreiben der original-width-Eigenschaft. Finden Sie unter diesem link http://jsfiddle.net/rqmNY/7/