2016-06-15 8 views
4

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

は私のHTMLの例です:

enter image description here

しかし、私はそれはそうのようになりたい::

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

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

enter image description here

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

+3

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

+0

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

+0

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

答えて

6

例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; 
} 
+0

まさに私が必要としていることです、ありがとうございました! – w0ns88

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

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

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

1

別の解決策。 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>

+0

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

関連する問題