Tabellenbreite

KasselJulian · 25.10.2013

Hi,
ich habe eine Tabelle mit drei Spalten. Die erste und letzte sollen dabei eine Breite von 25% haben. Die mittlere 50% (insgesammt 100%).
Leider ist es mir nicht gelungen das zu realisieren:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>undefined</title>
</head>
<body>
    <style type="text/css">
    table.field{
        table-layout:fixed;
        word-wrap:break-word;
        background:blue;
        width:100%;
    }
        td, th{
            border:1px solid black;    
        }
        table.field tr{
            width:50%;    
        }
        table.field tr:first-child,
        table.field tr:last-child{
            width:25% !important;
        }
    </style>
        <table class="field">
            <thead>
                <tr>
                    <th>*</th>
                    <th>*</th>
                    <th>*</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
            </tfoot>
        </table>
</body>
</html>

Kann mir jemand helfen?

randacek_pro · 25.10.2013

AW: Tabellenbreite

Schau mal, was du definierst.

Du definierst die Tabelle mit der Klasse "field" auf 100% Breite (okay), dann willst du die 100% in 3 Spalten teilen, 25, 50, 25 (soweit auch klar).
Aber: du definierst <tr> table rows, also keine Spalten, sondern Tabellenzeilen

Du müsstest in dem Fall <col> für Column (Spalte) bzw. colgroup nutzen.
Die kannst du dann auch direkt ansprechen, ohne first-child und last-child, was imho auch Probleme machen dürfte.

Und das <style>-Element besser in den <head>

Lieber Gruß

KasselJulian · 25.10.2013

AW: Tabellenbreite

Hi und danke für den Beitrag,
ich muss die Lösung mit reinem CSS unter dem vorgegebenen HTML-Code lösen. Sprich ich kann kein <col>-Tag nutzen. Wie würde eine Lösung mit reinem CSS aussehen?

randacek_pro · 25.10.2013

AW: Tabellenbreite

Wieso kannst in reinem CSS kein <col> benutzen? :uhm:

Isometric · 25.10.2013

AW: Tabellenbreite

Und wenn du "th" eine Klasse zuweist?

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>undefined</title>
</head>
<body>
    <style type="text/css">
    table.field{
        table-layout:fixed;
        word-wrap:break-word;
        background:blue;
        width:100%;
    }
        td, th{
            border:1px solid black;    
        }
        th.spalte2,
        table.field tr{
            width:50%;    
        }
        th.spalte1,
        th.spalte3,
        table.field tr:first-child,
        table.field tr:last-child{
            width:25% !important;
        }
    </style>
        <table class="field">
            <thead>
                <tr>
                    <th class ="spalte1" >*</th>
                    <th class ="spalte2" >*</th>
                    <th class ="spalte3" >*</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td>*</td>
                    <td>*</td>
                    <td>*</td>
                </tr>
            </tfoot>
        </table>
</body>
</html>

KasselJulian · 25.10.2013

AW: Tabellenbreite

randacek_pro schrieb:
Wieso kannst in reinem CSS kein <col> benutzen? :uhm:

Weil es kein <col>-Element im HTML gibt und ich dieses auch nicht hinzufügen kann!

Isometric schrieb:
Und wenn du "th" eine Klasse zuweist?

Das funktioniert nicht. Wie bereits gesagt kann ich in der HTML nichts ändern. Es ist jetzt eine reine CSS-Aufgabe die Breite zu steuern (ohne Erweiterungen am HTML selbst).

Isometric · 25.10.2013

AW: Tabellenbreite

Und so:

HTML:

    <style type="text/css">
    table.field{
        table-layout:fixed;
        word-wrap:break-word;
        background:blue;
        width:100%;
    }
        td, th{
            border:1px solid black;    
        }
        th{
            width:50%;    
        }
        th:first-child,
        th:last-child{
            width:25% !important;
        }
    </style>

KasselJulian · 25.10.2013

AW: Tabellenbreite

... works like a charm