Zentriertisch TR's

-2

Ich erstelle eine Website, die einige Inhalte in einer Tabelle anzeigt und ich möchte, dass sie immer zentriert ist. Es ist zentriert, wenn es 3 TDs gibt, es ist zentriert, aber ich möchte, dass es auch ein TR in der Mitte der 3 TDs zentriert, wenn es nur 2 TDs hat.Zentriertisch TR's

Current

Ich möchte die Test5 und Test6 in der Mitte des anderen TR zum Zentrum, aber ich kann nicht, wie scheinen, um herauszufinden.

Mein Aktueller Code:

<html> 
 

 
<style> 
 
    #Center { 
 
    text-align: center; 
 
    } 
 
    #CenterTable { 
 
    text-align: center; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 50%; 
 
    } 
 
</style> 
 

 
<div id="Center"> 
 

 
    <p>Testing Centered Table</p> 
 

 
    <table id="CenterTable"> 
 

 
    <tr> 
 

 
     <td> 
 
     Test1 
 
     </td> 
 

 
     <td> 
 
     Test2 
 
     </td> 
 

 
     <td> 
 
     Test3 
 
     </td> 
 

 
    </tr> 
 

 
    <tr> 
 

 
     <td> 
 
     Test4 
 
     </td> 
 

 
     <td> 
 
     Test5 
 
     </td> 
 

 
    </tr> 
 

 
    </table> 
 

 
</div> 
 

 
</html>

Quelle

2016-08-09 Cheese

Beispiel ist zu vage, können Sie es colspan Attribut zu glätten verwenden können, aber nicht sicher, wo sie anzuwenden, weil Sie keine Header haben, reale Daten usw. – albert

Haben Sie wirklich brauchen einen Tisch benutzen? Sie können dies mit DIVs tun, aber für eine Tabelle können Sie TDs nicht so anzeigen, wie Sie möchten. –

http://stackoverflow.com/questions/36686154/what-is-the-best-html-layout-technique-divs-vs-tables – mlegg

Die Tische sind nicht so gut wie gar nicht mehr verwendet. Sie können dies mit Hilfe von div-Boxen und dem Flexbox-Design erreichen.

Heres ein Codeausschnitt von dem, was ich denke, du versuchst zu erreichen, aber ich habe es mit divs und dem Flexbox-Design gemacht.

.box-wrap { 
 
    background: #a00; 
 
    display: flex; 
 
    justify-content: center; 
 
    flex-wrap: wrap; 
 
} 
 
.test { 
 
    background: #0a0; 
 
    width: 33.33%; 
 
    height: 5em; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="box-wrap"> 
 
    <div class="test"> 
 
    test1 
 
    </div> 
 
    <div class="test"> 
 
    test2 
 
    </div> 
 
    <div class="test"> 
 
    test3 
 
    </div> 
 
    <div class="test"> 
 
    test4 
 
    </div> 
 
    <div class="test"> 
 
    test5 
 
    </div> 
 
</div>

Quelle

2016-08-09 01:28:26

Antwort

Verwandte Themen