Wie bekomme ich eine <table> mit Spalten mit fester Breite, um die gesamte Breite des Containers zu füllen?

Question

Ich habe eine HTML-Seite mit einem Abschnitt in der Mitte davon. Dieser horizontale Abschnitt verwendet <table> und verfügt über ein benutzerdefiniertes Hintergrundbild, das horizontal über den gesamten Abschnitt hinweg wiederholt werden muss. Diese Tabelle enthält 5 Elemente. Diese Elemente haben eine statische Größe von 140 Pixeln.

Mein Problem ist, ich kann nicht das Bild über den verbleibenden Platz zu wiederholen. Es ist, als würde der Tisch nicht die gesamte Breite ausdehnen. Wenn ich jedoch die Tabellenbreite auf 100% einstelle, wachsen die Tabellenzellen über 140 px hinaus.

Was mache ich? Ich möchte, dass der Tisch den gesamten Raum ausfüllt. Aber ich möchte, dass meine Zellen eine konstante Größe haben und ich möchte, dass das Hintergrundbild verwendet wird.

Vielen Dank!

Answer 1

Die Größen der Hintergrundbilder sind irrelevant für CSS, keine Hilfe. Vielleicht können Sie etwas in JavaScript hacken, sonst müssen Sie wissen, wie groß Ihr Hintergrundbild ist.

Answer 2

Fügen Sie eine 6. Zelle hinzu und geben Sie keine Breite an. Dies hält die 5 Zellen bei 140px und die 6. Zelle wird bis zum Ende gedehnt, wenn die Tischbreite auf 100% eingestellt ist.

Answer 3

Ein <table> ist nur so groß wie die Zellen darin. Wenn Sie also 5 Zellen mit je 140 Pixeln Breite haben, wird die Tabelle nur 700 Pixel breit sein: Sie wird sich nicht über die gesamte verfügbare Breite erstrecken.

Sie konnten die <table> in einem <div> und legte die sich wiederholende Hintergrundbild auf dem <div> wickeln, wenn the 6th cell solution nicht oder funktioniert nicht bevorzugt.

Answer 4

Erwägen Sie, den mittleren Abschnitt in ein div einzufügen und das Hintergrundbild auf div anzuwenden. Setzen Sie dann die Breite Ihrer td-Elemente in der Tabelle auf 140px.

Hier ist ein example. Natürlich müssen Sie auf Ihr Bild verweisen, anstatt auf flurries.png (das nicht Teil der Geige ist, so dass es nicht angezeigt wird).