Равное расстояние между двумя столбцами внутри элемента таблицы - PullRequest
Новая
       9

Равное расстояние между двумя столбцами внутри элемента таблицы

1 голос
/ 18 марта 2019 

table {
width:100%;
}
td {
padding:15px;
}
<table>
  <tr>
    <td>100</td>
    <td>20A long text</td>
    <td>300</td>
    <td>300</td>

  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>300</td>

  </tr>
</table>

Содержимое ячейки может иметь различную длину, а ширина ячейки будет соответствовать содержимому.Это должно выглядеть примерно так

| --- Text1 --- | --- Очень длинный текст --- | --- Text 3 --- |

Но этокак это выглядит сейчас

| --Text1-- ​​| ----- Очень длинный текст ----- | --Text 3-- |

Повторюсь, яЯ не ожидаю равную ширину ячейки длины, но равное расстояние между столбцами.

Ответы [ 4 ]

2 голосов
/ 18 марта 2019

К сожалению, я не знаю способа сделать это на чистом CSS.
В качестве обходного пути вы можете использовать JavaScript для вычисления ширины, необходимой каждой ячейке таблицы, чтобы достичь 100% ширины.

Как это начать?Обратите внимание, что я изменил CSS, чтобы установить горизонтальное заполнение на 0 (это необходимо, в противном случае вам придется включить вычисляемое заполнение в вычисление JS);и я дал границы ячеек (это не необходимо, но оно лучше демонстрирует требуемые результаты). 

let tbl = document.getElementById('tbl');
tbl.style.width = 'auto';
let extraSpace = document.body.clientWidth - tbl.offsetWidth;
let cols = tbl.rows[0].cells.length;
for (i = 0; i<cols; ++i) {
  let padding = Math.round(extraSpace/(cols-i));
  let cell = tbl.rows[0].cells[i];
  cell.style.width = (cell.clientWidth + padding) + 'px';
  extraSpace -= padding;
}
table {
  width: 100%;
}

td {
  padding: 15px 0;
  text-align: center;
  border:1px dotted gray;
}
<table id="tbl">
  <tr>
    <td>100</td>
    <td>20A long text</td>
    <td>300</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>300</td>
  </tr>
</table>
0 голосов
/ 18 марта 2019

Используя CSS, вы можете установить padding-left и padding-right для элементов <td> и <th>, чтобы установить интервал между столбцами. 

td, th {
  padding-left: 15px;
  padding-right: 15px;
}
<table border="1">
  <tr>
    <th>1st cell</th>
    <th>2nd cell</th>
    <th>3rd cell</th>
  </tr>
  <tr>
    <td>1st cell content</td>
    <td>2nd cell content</td>
    <td>3rd cell content</td>
  </tr>
</table>
0 голосов
/ 18 марта 2019

Пожалуйста, для следующих вопросов, пожалуйста, укажите свой код.
Вы можете добавить свойства CSS макет таблицы: исправлено; к тегу таблицы

Фиксированные свойства: Устанавливает алгоритм фиксированной таблицы. Ширина таблицы и столбца задается шириной таблицы и столбца или шириной первого ряда ячеек. Ячейки в других строках не влияют на ширину столбцов. Если в первой строке ширины нет, ширина столбца делится поровну по всей таблице, независимо от содержимого внутри ячеек

Кроме того, вы можете установить фиксированные отступы (влево и вправо) для ячеек, чтобы иметь фиксированные левые и правые пробелы
Вот пример 

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">

        .tab-cell {
            padding-left: 20px;
            padding-right:  20px;
        }

    </style>
</head>
<body>
    <table style="table-layout: fixed; text-align: center;" border="1">
        <tr>
            <th class = "tab-cell">Column A</th>
            <th class = "tab-cell">Column B</th>
            <th class = "tab-cell">Column C</th>
        </tr>
        <tr>
            <th class = "tab-cell">some content</th>
            <th class = "tab-cell">some looooooooooooooooooooooooooooooooong content</th>
            <th class = "tab-cell">some content</th>
        </tr>
    </table>
</body>
</html>

Результат

enter image description here
Надеюсь, это поможет.
Хель
0 голосов
/ 18 марта 2019

Если вы удалите width:100%, столбцы будут растягиваться, чтобы соответствовать содержанию, с равным 15px отступа между ними.В настоящее время ширина 100% приводит к тому, что таблица автоматически перераспределяет доступное пространство для заполнения ширины экрана.

...