Horizontal Tisch Ausrichten funktioniert nicht

Question

Angenommen, ich einen Code haben, wie so ...

table { 
 
    text-align: center; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Wie der Text zentriert ist nicht so weit sehen kann. Wenn ich diesen Code jedoch hinzufüge, wird er zentriert.

td { 
    width: 1000px; 
} 

Kann mir jemand den Grund erklären, warum es so ist?

Außerdem möchte ich nicht, dass mein Code von height s und width s (in Pixeln) ist, kann also jeder erklären, wie man den Text horizontal ohne Berücksichtigung einer angegebenen Breite und Höhe ausrichten?

Answer 1

Ihr Code zentriert nicht, weil Sie keine bestimmte Höhe für Ihre td s haben und wenn Sie dies tun, finden Sie Ihren Code funktioniert. Wenn die td Breite ist, wird es Ihren Text 500px unten die Seite gehen lassen.

Und um den zweiten Teil Ihrer Frage zu beantworten, hier sind zwei Möglichkeiten, wie Sie das Problem lösen können.

1.

table { 
 
    text-align: center; 
 
    margin: auto; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

2.

table { 
 
    text-align: center; 
 
    width: 100%; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

table { 
 
    text-align: center; 
 
    border: 2px solid blue; 
 
}

<table onclick="this.style.width = '100%'"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Text</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Das könnte Sie sehen helfen, dass der Text in der Tat zentriert ist, aber die Tabelle auf dem Bildschirm erweitert nicht. Wenn Sie auf die Tabelle klicken, wird width auf 100% gesetzt, und Sie erhalten die erwartete Ausgabe.