CSS HTML-Tabelle aus DIVs, aber letzte "Zelle" mit auto width?

CyborgBeta · 28. März 2024

Hallo, ich hab zurzeit folgendes CSS:

CSS:

        .div-table {
            display: table;
            width: 100%;
            background-color: #eee;
            border: 1px solid #666666;
            border-spacing: 5px; /* cell spacing: poor IE support for this */
        }
        .div-table-row {
            display: table-row;
            width: 100%;
            clear: both;
        }
        .div-table-col {
            float: left; /* fix for  buggy browsers */
            display: table-column;
            width: 25%;
            background-color: #ccc;
            white-space: pre-wrap;
        }
        .auto-width {
            width: auto;
        }

Und es gibt 4 Spalten:

HTML:

<div class="div-table">
    #foreach( $e in $data2 )
    <div class="div-table-row">
        <div class="div-table-col">$e.get(3)</div>
        <div class="div-table-col">$e.get(1)</div>
        <div class="div-table-col">$e.get(2)</div>
        <div class="div-table-col"><button type="button" onclick="javascript:location.href='...?id=$e.get(0)'">Delete $e.get(0)</button></div>
    </div>
    #end
</div>

Das Ergebnis sieht ungefähr so aus:

Und das ist auch schon das Problem ... denn die letzte Spalte (und, wenn möglich, auch die erste) sollte eine automatische Größe haben und die vorherigen Spalten sollen entsprechend mehr als nur 25 % Platz einnehmen.

Wie erreiche ich das? Gibt es Gewichte oder Prios in CSS?

Danke & Gruß

floq0r · 28. März 2024

display: table; ? puh

Ich würde das - wie heute schon an anderer Stelle empfohlen - mit einem Grid lösen.

CyborgBeta · 28. März 2024

@floq0r

Ok, was müsste ich dafür wie ändern?

floq0r · 28. März 2024

Beispiel:

CSS:

.div-table
{
    display: grid;
   grid-template-columns: repeat(4, 1fr);
}
.div-table-row
{
    display: contents;
}
.div-table-col
{
    display: block;
}

edit: Damit hätten alle Spalten die gleiche Breite, möchtest du Beispielsweise, dass die zwei mittleren Spalten eine fixe Breite haben und die anderen sich den restlichen Platz aufteilen nimmst du
grid-template-columns: 1fr 70px 70px 1fr

CyborgBeta · 28. März 2024

@floq0r Danke!

Das Ergebnis muss auch nicht super-schön sein, ich möchte nur ein paar Nutzdaten halbwegs einheitlich darstellen.

floq0r schrieb:
möchtest du Beispielsweise, dass die zwei mittleren Spalten eine fixe Breite haben und die anderen sich den restlichen Platz aufteilen nimmst du
grid-template-columns: 1fr 70px 70px 1fr

Ginge dann auch: grid-template-columns: 1fr auto auto 1fr?

Das Problem ist ja, dass ich die Breite der zwei äußeren Spalten nicht im Vorfeld kenne, infolgedessen auch nicht die der beiden mittleren.

floq0r · 28. März 2024

Das "fr" steht für "free", das heißt die Spalten nehmen sich im jeweiligen Verhältnis den freien Raum. "auto" müsstest du probieren, müsste drauf hinauslaufen, dass die zwei mittleren Spalten dann eine Breite von 0 haben bzw. die Mindestbreite vom Content bestimmt wird. Du kannst hier aber auch Prozentwerte verteilen oder mit minmax() arbeiten.

CyborgBeta · 28. März 2024

@floq0r Danke, sieht nun gut aus:

CSS:

        .div-table {
            display: grid;
            grid-template-columns: auto 1fr 1fr auto;
            background-color: #eee;
            grid-gap: 10px;
        }
        .div-table-row {
            display: contents;
            clear: both;
        }
        .div-table-col {
            display: block;
            background-color: #ccc;
            white-space: pre-wrap;
        }

floq0r · 28. März 2024

Tipp: du kannst einzelne grid-cells auch über mehrere rows oder columns spannen:

CSS:

.div-table-col.msg123
{
    grid-column: 1/4;
}

CyborgBeta · 28. März 2024

Alles klar, ich bin ganz zufrieden ...

Zeile 9 (clear: both;) kann auch noch "raus".

... Für mich sieht das insgesamt schöner aus als eine schnöde Tabelle. 😅

Guru-Meditation · 29. März 2024

Schaue dir doch mal display: flex an!

CyborgBeta · 30. März 2024

Es sieht zurzeit so aus:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            font-family: 'Courier New', monospace;
            font-size: 10pt;
        }
        .parent-1 {
            display: grid;
            grid-template-columns: 4fr 1fr;
            grid-template-rows: 1fr;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
        }
        .parent-2 {
            display: grid;
            grid-template-columns: 2fr repeat(2, 7fr) 4fr;
            grid-template-rows: 1fr;
            grid-column-gap: 10px;
            grid-row-gap: 10px;
        }
        .v-center {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            justify-content: center;
            height: 200px;
            width: 150px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 10px;
        }
        .bg-normal {
            background-color: initial;
        }
        .bg-grey {
            background-color: #eee;
        }
        .bg-pre-wrap {
            white-space: pre-wrap;
        }
        hr {
            border: 0;
            margin: 10pt auto;
        }
    </style>
</head>
<body>
<div class="parent-1">
    <div>
        <p><b>Übersicht:</b></p>
        <table>
            <thead>
            <tr>
                <th>Datum</th>
                <th>Wer</th>
                <th>Betrag</th>
                <th>Vorher</th>
                <th>Nachher</th>
                <th>Prozent A</th>
                <th>Betrag A</th>
                <th>Prozent B</th>
                <th>Betrag B</th>
                <th>Comment</th>
            </tr>
            </thead>
            <tbody>
            #foreach( $e1 in $data1 )
            <tr>
                #foreach( $e2 in $e1 )
                <td>$e2</td>
                #end
            </tr>
            #end
            </tbody>
        </table>
    </div>
    <div>
        <p><b>Controls:</b></p>
        <form action="javascript:;" onsubmit=" myFunction( this ) ">
            <label for="f1">Datum:</label><br>
            <input type="text" id="f1" name="f1" value="2023-11-15T12:34:56Z"><br>

            <input type="radio" id="f2" name="wer" value="a" checked>
            <label for="f2">a</label><br>
            <input type="radio" id="f3" name="wer" value="b">
            <label for="f3">b</label><br>

            <label for="f4">Betrag:</label><br>
            <input type="text" id="f4" name="f4" value="0.0"><br>

            <label for="f5">Vorher:</label><br>
            <input type="text" id="f5" name="f5" value="0.0"><br><br>

            <button type="submit">
                Absenden
            </button>
        </form>
        <div class="v-center">
            <button type="button" onclick="javascript:location.href='1/delete-last'">Delete last (tb)</button>
            <br>
            <button type="button" onclick="javascript:location.href='1/clear-all'">Clear all (tb)</button>
            <br>
            <button type="button" onclick="javascript:location.href='1/chat-clear-all'">Clear all (chat)</button>
        </div>
    </div>
</div>
<hr>
<div class="parent-2">
    <div><p><b>ChatGPT:</b></p></div>
    <div></div>
    <div></div>
    <div><p><b>Controls:</b></p></div>
    #foreach( $e in $data2 )
    <div class="bg-grey">$e.get(3)</div>
    <div class="bg-grey bg-pre-wrap">$e.get(1)</div>
    <div class="bg-grey bg-pre-wrap">$e.get(2)</div>
    <div class="bg-normal">
        <button type="button" onclick="javascript:location.href='1/chat-delete-id?id=$e.get(0)'">Delete
            $e.get(0)
        </button>
    </div>
    #end
</div>
<script>
    document.getElementById("f1").value = new Date().toISOString().substring(0, 19) + "Z";
    async function myFunction( form ) {
        let date = new Date(form.f1.value);
        let wann = date.getTime();
        let wer = form.wer.value;
        let betrag = form.f4.value;
        let vorher = form.f5.value;
        let s = `wann=${wann}&wer=${wer}&betrag=${betrag}&vorher=${vorher}`;
        let response = await fetch("1/add?" + s);
        let ok = await response.text();
        alert( ok );
        location.reload();
    }
</script>
</body>
</html>

Geht das so oder ist da etwas dabei, was man so nicht machen sollte?

... Das Problem ist zurzeit das <div class="v-center"> ...

Ich möchte drei Dinge:

1. Der Content soll gestreched werden (auf 150px)
2. Die Schaltflächen sollen vertikal(!!!) zentriert werden
3. Zwischen den Schaltflächen soll eine Zeile Platz sein, damit man nicht versehentlich die falsche Schaltfläche anklickt

(3) bekomme ich nicht hin. 😰

Nach etwas Durchwühlen von StackOverflow hab ich den Eindruck, das vertikale Zentrieren von Divs scheint ein Problem in CSS zu sein ... Mag mich aber auch täuschen.

floq0r · 31. März 2024

CSS:

.v-center {
       justify-content: space-between;
}

oder

CSS:

.v-center {
       justify-content: space-around;
}

Suche

CSS HTML-Tabelle aus DIVs, aber letzte "Zelle" mit auto width?

CyborgBeta

Lt. Commander

floq0r

Commander

CyborgBeta

Lt. Commander

floq0r

Commander

CyborgBeta

Lt. Commander

floq0r

Commander

CyborgBeta

Lt. Commander

floq0r

Commander

CyborgBeta

Lt. Commander

Guru-Meditation

Cadet 4th Year

CyborgBeta

Lt. Commander

floq0r

Commander

Ähnliche Themen