各行/ trをテーブルの中央に置くことはできますか？

の各行（<tr>）を中央に配置しようとしています。私は数行に不均一な数を持っています。ここで各行/ trをテーブルの中央に置くことはできますか？

は私の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>

現時点では下記のように出力され

これが達成できれば、私はそれがどのようにできるか知ることができてとても幸せです。正規タグ（同構造）を有する

出典

2016-06-15 w0ns88

1についてもっと読む）あなたが本当にここにテーブルが必要なのでしょうか？ 2）ディスプレイは何でもします –

これはテーブルのみのソリューションを必要としますか？ – Pugazh

テーブルタグを必要としない場合、フレックスボックスは希望するレイアウトを実現するための現代的で簡単なソリューションです。 – Paul

例INFOSのみため

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>

。テーブルのCSSは次のようになります。

tr { display:flex; justify-content:center; } td { min-width:1.5em; }

出典

2016-06-15 12:56:12

まさに私が必要としていることです、ありがとうございました！ – 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>

出典

2016-06-15 12:52:29

この方法では、テーブルをネストすることもできます。私はより良い見通しのためにパディングとスペースを増やしました。 フレキシボックスを使用して

<!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>

出典

2016-06-15 13:03:26 frank

別の解決策。 CSSを使用して、各行の列数を指定できます。

フレキシボックス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>

出典

2016-06-15 13:05:29 Pugazh

ありがとうございます！ – w0ns88

各行/ trをテーブルの中央に置くことはできますか？

答えて

関連する問題