[gelöst] Tabelle mittig ausrichten. Nicht si trivial wie gedacht

Emess

Habe hier eine Tabelle gebaut die ich mittig oben in eine Section einfügen will . Vor einigen Stunden habe ich mir das noch einfach vorgestellt.

Aber ich bekomme sie von der Seite links nur zu einem Viertel verschoben

table.jpeg

HTML

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  
    <style>
.oe {
    font-family: arial;
    color: #000;
    font-size: 14px;
    margin: 5px;
    height: 230px;
    width: 280px;

}    


/* }            
.centered-element {
    width: 300px;
    height: 30px;
    border-radius: 5px; 
 
 */

.oe table {
    margin-left: auto;
    margin-right: auto;
    border-color: #000;

}

.oe h3 {
    /* horizontal zentrieren */
    text-align: center;
    font-weight: bold;
  }

.oe th {
    padding: 5px;
    border-color: transparent;
}

.oe td {
    padding: 5px;
    border-color:transparent;
}


    </style>
</head>
<body>
    <section>
        <div class="container">
            <div class="row">
                 <div class="col-md-12 text-center">
             <div class="oe centered-element">
                 <table class="table">
                     <tbody>
                        <h3>Öffnungszeiten</h3> 
                       <tr>
                         <th  colspan="2">Mo + Mi + Fr</th>
                       </tr>
                       <tr>
                         <td colspan="2">11:00 - 14:00 und 17:30 - 22:30</td>
                     </tr>
                     <tr>
                         <th  colspan="2">Dienstag ist Ruhetag</th>
                     </tr>
                         <tr>
                         <th  colspan="2">Sa + SO</th>
                         <tr>
                         <td colspan="2">11:00 - 14:00 und 17:30 - 22:30</td>
                     </tr>
                 </tbody>
             </table>
             </div>
             </div>
            </div>

</section>
</body>

</html>

Alles anzeigen

ich steh auf dem schlauch

jonas3344

Einfach Flexbox benutzen:

A Complete Guide to Flexbox | CSS-Tricks

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the…

css-tricks.com

display: flex und justify-content: center.

Und eine Tabelle ist für tabellarische Daten gedacht und nicht zum Layouten.

Emess

Da ich ja am üben und lernen bin wäre ich über ein Beispiel sehr erfreut.

Flexbox hab ich noch nie benutzt. Gibt es eine Seite die mein Problem behandelt

Es sollte doch aber auch mit meinem Code möglich sein

nextuser

Hi Emess,

Zitat von Emess

Da ich ja am üben und lernen bin...

gerade dann, bitte nimm stark veraltete Sachen erst gar nicht auf. Wie jonas schon sagte, "table" für was anderes als Tabellen: NEIN!

Zitat von Emess

Flexbox hab ich noch nie benutzt. Gibt es eine Seite die mein Problem behandelt

Auch da hat jonas dir ne gute, einfach zu verstehende Seite verlinkt. Fuchs dich da einfach ein wenig rein...

Zitat von Emess

Es sollte doch aber auch mit meinem Code möglich sein

Möglich wäre es natürlich, aber bitte nicht so.

Und zu deinem Code mal an sich:

Ich würde nicht mehr mit festen, absoluten Einheiten wie "px" arbeiten. Nutze lieber "em / rem".
Header-Tags (h1-h6) sind schon standardmäßig in fetter Schrift, kein "bold" notwendig.
Du öffnest 4 div-Container, schließt aber nur 3.
Mehrere CSS-Blocks mit demselben Inhalt (diene th,td) solten lieber zusammengefasst werden.
Einem table-Tag die Klasse "table" zu geben..., ne lass mal.

Zitat von Emess

... wäre ich über ein Beispiel sehr erfreut.

Mal dein Code als Beispiel, wie ich es machen würde:

HTML

<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
        <style>
            section,
            section>p
            {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            section>p:not(:last-of-type) {margin-bottom: 2rem;}
            section>h2 {margin-bottom: 3rem;}
            section>p>span {font-weight: bold;}
        </style>
    </head>
    <body>
        <section>
            <h2>Öffnungszeiten</h2>
            <p>
                <span>Mo + Mi + Fr</span>
                11:00 - 14:00 und 17:30 - 22:30
            </p>
            <p>Dienstag ist Ruhetag</p>
            <p>
                <span>Sa + So</span>
                11:00 - 14:00 und 17:30 - 22:30
            </p>
        </section>
    </body>
</html>

Alles anzeigen

Lupus_III

@nextuser-. Nur zu meinem Verständnis.

section>p:not(:last-of-type) {margin-bottom: 2rem;} - Soll das letzte p-Tag keinen 2rem Abstand nach unten haben, die anderen aber schon?

nextuser

Zitat von Lupus_III

@nextuser-. Nur zu meinem Verständnis.
section>p:not(:last-of-type) {margin-bottom: 2rem;} - Soll das letzte p-Tag keinen 2rem Abstand nach unten haben, die anderen aber schon?

Jap, richtig verstanden.

Emess

Sorry im Voraus.!

Aber was für ein CSS ist den dass? SCSS oder ähnliches?

nextuser

Zitat von Emess

Sorry im Voraus.!
Aber was für ein CSS ist den dass? SCSS oder ähnliches?

Ganz normales CSS!

Auch CSS entwickelt sich weiter, wobei ich jetzt nichts wirklich neues benutzt habe.

Aber zur kurzen Erklärung:

Mit ">" sprichst du alle DIREKTEN Kindelemente an.
Mit ":not(...)" sprichst du Elemente an, die unter den aktuell selektierten (z.B. alle p-Tags bei "section>p") AUSGENOMMEN werden sollen.
Mit ":last-of-type" sprichst du das letzte von ein oder mehreren Elementen gleichen Typs aus den aktuell selektierten an.

Emess

Das ist ja interessant. Hier handelt es sich aber nicht um "id's! oder "class". "Und es wird auch kein div verwendet" Für mich ist das neu.

Ich versuche immer gerne das neu gelernte so oft wie möglich anzuwenden.

nextuser

Zitat von Emess

Das ist ja interessant. Hier handelt es sich aber nicht um "id's! oder "class".

Hier ist es ja nur ein kleines Beispiel.

Bei einer richtigen Seite mit vielen weiteren Elementen verwende ich natürlich auch Id's & Klassen.

[gelöst] Tabelle mittig ausrichten. Nicht si trivial wie gedacht

Emess 11. Juli 2023 um 21:32

Jetzt mitmachen!

Tags