Ist es möglich, jede Zeile/tr in einer Tabelle zu zentrieren?

Ich versuche, jede Zeile (<tr>) eines table zu zentrieren. Ich habe eine ungerade Anzahl auf ein paar Zeilen. HierIst es möglich, jede Zeile/tr in einer Tabelle zu zentrieren?

ist ein Beispiel für meine HTML:

<!DOCTYPE html> 
<html> 
<body> 

<table border="1"> 
    <tr> 
    <td>1</td> 
    <td>2</td> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    <td>6</td> 
    </tr> 
    <tr> 
    <td>7</td> 
    <td>8</td> 
    <td>9</td> 
    <td>10</td> 
    <td>11</td> 
    </tr> 
</table> 

</body> 
</html>

Im Moment ist der Ausgang, wie unten gezeigt wird:

Aber ich würde es wie so sein mag:

Wenn dies erreicht werden kann, wäre ich sehr glücklich zu wissen, wie es geht.

Quelle

2016-06-15 w0ns88

1) brauchen Sie wirklich einen Tisch hier? 2) Display wird alles tun –

Sollte dies eine Tabelle nur Lösung? – Pugazh

Wenn kein Tabellen-Tag benötigt wird, ist flexbox eine moderne und einfache Lösung, um Ihr gewünschtes Layout zu erreichen. – Paul

Beispiel mit regelmäßigen tag (gleiche Struktur)

div { 
 
    display:table; 
 
    border:solid 1px; 
 
    margin:auto; 
 
    } 
 
p { 
 
    margin:0; 
 
    display:flex; 
 
    justify-content:center; 
 
    } 
 
span { 
 
    margin:3px; 
 
    min-width:1em; 
 
    border:solid 1px;; 
 
    }

<div> 
 
    <p> 
 
    <span> 1 </span> 
 
    <span> 2 </span> 
 
    <span> 3 </span> 
 
    <span> 4 </span> 
 
    <span> 5 </span> 
 
    <span> 6 </span> 
 
    </p> 
 
    <p> 
 
    <span> 7 </span> 
 
    <span> 8 </span> 
 
    <span> 9 </span> 
 
    <span> 10 </span> 
 
    <span> 11</span> 
 
    </p> 
 
    </div>

für Infos nur. das CSS für Ihre Tabelle wäre:

Quelle

2016-06-15 12:56:12

Genau das, was ich brauche, vielen Dank! – w0ns88

<table width="652" height="120" border="0"> 
    <tr> 
    <td width="646" height="57"><table width="649" height="55" border="1"> 
     <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     </tr> 
    </table></td> 
    </tr> 
    <tr> 
    <td align="center" valign="baseline"><table width="528" height="55" border="1"> 
     <tr> 
     <td>7</td> 
     <td>8</td> 
     <td>9</td> 
     <td>10</td> 
     <td>11</td> 
     </tr> 
    </table></td> 
    </tr> 
</table>

Quelle

2016-06-15 12:52:29

Sie könnten es auch tun, indem Sie Tabellen auch verschachteln. Ich habe das Padding und den Abstand für eine bessere Ansicht erhöht.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <style type="text/css"> 
 
    .inside_table td{ 
 
    border: 1px solid black; 
 
    } 
 
    .table_out{ 
 
    border: 1px solid black; 
 
    } 
 
.table_out td{ 
 
    border: 1px solid black; 
 
    } 
 
    </style> 
 
</head> 
 
<body> 
 

 
    <table class="table_out" cellpadding="10" cellspacing="10"> 
 
    <tr> 
 
     <td>1</td> 
 
     <td>2</td> 
 
     <td>3</td> 
 
     <td>4</td> 
 
     <td>5</td> 
 
     <td>6</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="6" style="border:none"> 
 
     <table class="inside_table" cellpadding="10" cellspacing="10"> 
 
      <tr> 
 
      <td>7</td> 
 
      <td>8</td> 
 
      <td>9</td> 
 
      <td>10</td> 
 
      <td>11</td> 
 
      </tr> 
 
     </table> 
 
     </td> 
 
    </tr> 
 
    </table> 
 

 
</body> 
 
</html>

Quelle

2016-06-15 13:03:26 frank

Eine andere Lösung Flexbox verwenden. Sie können die Anzahl der Spalten für jede Zeile mit CSS angeben.

Lesen Sie mehr über Flexbox here

div.wrapper { 
 
    width: 240px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-flow: row wrap; 
 
    text-align: center; 
 
    justify-content: center; 
 
    border: 2px solid grey; 
 
    padding: 3px; 
 
} 
 
div.wrapper div { 
 
    border: 2px solid grey; 
 
    width: calc((100% - (5px * 2 * 6))/6); 
 
    /* 6 - Number of columns in a row */ 
 
    /* 5px - 3px margin + 2px border width */ 
 
    margin: 3px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <div class="wrapper"> 
 
    <div>1</div> 
 
    <div>2</div> 
 
    <div>3</div> 
 
    <div>4</div> 
 
    <div>5</div> 
 
    <div>6</div> 
 
    <div>7</div> 
 
    <div>8</div> 
 
    <div>9</div> 
 
    <div>10</div> 
 
    <div>11</div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-06-15 13:05:29 Pugazh

Danke, schau hinein! – w0ns88

Ist es möglich, jede Zeile/tr in einer Tabelle zu zentrieren?

Antwort

Verwandte Themen