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

Emess · 8. Juli 2023

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 · 8. Juli 2023

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 · 8. Juli 2023

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 · 8. Juli 2023

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 · 8. Juli 2023

@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 · 8. Juli 2023

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 · 8. Juli 2023

Sorry im Voraus.!

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

nextuser · 8. Juli 2023

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 · 8. Juli 2023

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 · 8. Juli 2023

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

Jetzt mitmachen!

Teilen

Tags