Можно ли центрировать каждую строку/tr в таблице?

Я пытаюсь центрировать каждую строку (<tr>) table. У меня есть нечетное число на пару строк.Можно ли центрировать каждую строку/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

Если табличный тег не требуется, flexbox - это современное и простое решение для достижения желаемого расположения. – Paul

пример с регулярным тегом (такой же структурой)

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>

для INFOS только. 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

Другое решение с использованием Flexbox. Вы можете указать количество столбцов для каждой строки с помощью CSS.

Подробнее о 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>

источник

2016-06-15 13:05:29 Pugazh

Спасибо, посмотрим! – w0ns88

Можно ли центрировать каждую строку/tr в таблице?

ответ

Смежные вопросы