Создание одинаково расположенных столбцов в правой и левой выровненных столбцах таблицы - PullRequest
0 голосов
/ 29 августа 2018

У меня есть таблица с левыми и правыми выровненными столбцами, мне нужно сделать одинаковый интервал внутри столбцов.

Image with not equaled spacing

Что-то вроде

justify-content: space-between 

Но желательно без flexbox и сетки, только через html-таблицы.

.mtable {
  width: 100%;
  border: none;
  table-layout: fixed;
  font: normal 13px Arial, sans-serif;
}

.mtable th {
  padding: 10px;
  text-align: left;
  background-color: #ddd;
}

.mtable td {
  border-top: solid 1px #DADEE6;
  padding: 10px;
}

td:last-child {
  text-align: right;
}

td:nth-child(n+3) {
  text-align: right;
}
<table class="mtable">
  <tr>
    <td>Name</td>
    <td>Plaftorm</td>
    <td>Views</td>
    <td>Shows</td>
    <td>Fillrate</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>Telegram</td>
    <td>Android</td>
    <td>60 011"</td>
    <td>40 631</td>
    <td>70 %</td>
    <td>On moderation</td>
  </tr>
  <tr>
    <td>WhatsApp</td>
    <td>iOS</td>
    <td>124 289"</td>
    <td>93 431</td>
    <td>43 %</td>
    <td>Active</td>
  </tr>
</table>

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Ваши столбцы уже имеют одинаковые размеры и равный интервал между ними, это просто не так очевидно, так как текст не доходит до края столбца. Добавление рамки вокруг каждой ячейки покажет, что все они одинаковы;

Вам не нужно ничего делать, чтобы гарантировать, что разрыв между ними одинаков - он уже есть.

.mtable {
  width: 100%;
  border: none;
  table-layout: fixed;
  font: normal 13px Arial, sans-serif;
}

.mtable th {
  padding: 10px;
  text-align: left;
  background-color: #ddd;
}

.mtable td {
  border-top: solid 1px #DADEE6;
  padding: 10px;
  border: 1px solid black; /* Added */
}

td:last-child {
  text-align: right;
}

td:nth-child(n+3) {
  text-align: right;
}
<table class="mtable">
  <tr>
    <td>Name</td>
    <td>Plaftorm</td>
    <td>Views</td>
    <td>Shows</td>
    <td>Fillrate</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>Telegram</td>
    <td>Android</td>
    <td>60 011"</td>
    <td>40 631</td>
    <td>70 %</td>
    <td>On moderation</td>
  </tr>
  <tr>
    <td>WhatsApp</td>
    <td>iOS</td>
    <td>124 289"</td>
    <td>93 431</td>
    <td>43 %</td>
    <td>Active</td>
  </tr>
</table>
0 голосов
/ 29 августа 2018

Если вы знаете, сколько у вас столбцов, вы можете сделать следующее:

.mtable td {
  width: 10%
}

В зависимости от того, сколько столбцов у вас есть, будет зависеть от значения%.

Таким образом, для таблицы из 6 столбцов это будет:

.mtable td {
 width: 16.6666666667%;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...