it-swarm.com.de

Warum respektiert meine HTML-Tabelle meine CSS-Spaltenbreite nicht?

Ich habe eine HTML-Tabelle und möchte, dass die ersten Spalten ziemlich lang sind. Ich mache das in CSS:

td.longColumn
{ 
     width: 300px;
}

und hier ist eine vereinfachte Version meiner Tabelle

<table>
  <tr>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td class='longColumn'></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   [ . . and a bunch more columns . . .]
  </tr>
</table>

Aus irgendeinem Grund scheint die Tabelle diese Spalte <300px zu machen, wenn viele Spalten vorhanden sind. Im Grunde möchte ich, dass diese Breite auf jeden Fall beibehalten wird (und einfach die horizontale Bildlaufleiste vergrößert wird). 

Der Container, in dem sich die Tabelle befindet, hat keine Art der maximalen Breite. Ich kann also nicht herausfinden, warum diese Spalte gedrückt wird, anstatt diese Breite zu beachten.

Gibt es da sowieso etwas, egal, diese Spalte bleibt eine bestimmte Breite?
Hier ist das CSS des äußeren Containers div:

#main
{
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}
39
leora

Sie können mehr Glück beim Einstellen der Breiten für Ihre Tabellenzellen haben, wenn Sie die Regel table-layout: fixed auf die Tabelle anwenden. Dies hat mir bei der Verwendung von Tabellen mit vielen cell-sizing-Problemen geholfen. Ich würde nicht empfehlen, nur DIVs zu verwenden, um Ihren Inhalt zu ordnen, wenn dies zum Zweck von Tabellen passt - zur Anzeige multidimensionaler Daten.

89
aphax

Ich stimme mit Hristo überein, aber es gibt einige Fälle, in denen eine Tabelle verwendet werden muss und die Lösung Ihres Tabellenproblems darin besteht, die Tabelle unterhalb der Klasse hinzuzufügen und dann die Breite der td nach Bedarf zu ändern.

.tables{ border-collapse:collapse; table-layout:fixed;}

Ich hoffe, das hilft jemandem, der eine Tischlösung sucht!

17
Sagar Ranpise

Wenn es sowohl max-width als auch min-width Attribute gibt, sollte es funktionieren.

10
umesh

Ich hatte das gleiche Problem mit einer Reihe von Spalten, in denen ich Spacer-Spalten haben wollte.

<td style='width: 10px;'>&nbsp;</td>

Aber als der Tisch breiter war als das Fenster, waren die Abstandshalter nicht wirklich 10px, aber vielleicht 5px . Und nur DIVs ohne TABLE zu verwenden, war in meinem Fall keine Option.

<td><div style='width: 10px;'></div></td>

Und es hat sehr gut funktioniert! :)

3
Matt Roy

Am besten können Sie die Spaltenbreite (td) einstellen, indem Sie einen Tabellenkopf (th) verwenden. Tabellenköpfe stellen die Breite Ihres TD automatisch ein. Sie müssen nur sicherstellen, dass Ihre Spalten in Ihrem Thead die gleiche Anzahl von Spalten in Ihrem Körper haben.

Schau es dir hier an: http://jsfiddle.net/tKAj8/

HTML

<table>
    <thead>
        <tr>
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="short-column">Short Column</th> <!-- th sets the width -->
            <th class="long-column">Long Column</th> <!-- th sets the width -->
        </tr>
    </thead>

    <tbody>
        <tr>
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="lite-gray">Short Column</td> <!-- td inherits th width -->
            <td class="gray">Long Column</td> <!-- td inherits th width -->
        </tr>
    </tbody>
</table>

CSS

table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }

.short-column { background: yellow; width: 15%; }
.long-column { background: Lime; width: 70%; }

.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
2
Oneezy

Verwenden Sie die Tabellenlayout-Eigenschaft und den "festen" Wert in Ihrer 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-Werte einstellen.

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

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

0
Cyan Baltazar

Ich hatte Probleme mit der Größe von Spalten in einer table-layout: fixed-Tabelle, die ein Colspan verwendete. Für alle, die eine Variante dieses Problems erfahren, bei der der obige Vorschlag nicht funktioniert, hat colgroup für mich gearbeitet (Variation des OP-Codes):

div {
    margin: 22px 0 0 0;
    padding: 30px 30px 15px 30px;
    border: solid 1px #AAAAAA;
    background-color: #fff;
    margin-bottom: 30px;
    margin-left: 10px;
    _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
    float: left;
    /*width: 1020px;*/
    min-width:1020px;
    display: block;
    overflow: visible;
    z-index: 0;
}
td.longColumn { 
     width: 300px;
}
table {
    border: 1px solid; 
    text-align: center;
    width: 100%;
}
td, tr {
  border: 1px solid; 
}
<div>
    <table>
        <colgroup>
            <col class='longColumn' />
            <col class='longColumn' />
            <col class='longColumn' />
            <col/>
            <col/>
            <col/>
            <col/>
        </colgroup>
        <tbody>
        <tr>
            <td colspan="7">Stuff</td>
        </tr>
        <tr>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Long Column</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
            <td>Short</td>
        </tr>
        </tbody>
    </table>
</div>

0
Allison