Как выровнять автоматически сгенерированную таблицу HTML по центру только с CSS? - PullRequest
Новая
       12

Как выровнять автоматически сгенерированную таблицу HTML по центру только с CSS?

0 голосов
/ 10 апреля 2020

У меня есть таблицы в файле HTML, которые автоматически создаются из таблиц Markdown (я использую пакет R bookdown для создания GitBook). Я хочу, чтобы на моем веб-сайте было выполнено несколько условий:

  1. Таблица должна быть выровнена по центру, если она меньше ширины страницы.
  2. Если таблица очень широка и не помещается на странице, таблица должна иметь отдельную полосу прокрутки по оси X, которая перемещает только таблицу (см. пример ниже). Это условие должно применяться для каждой переполненной таблицы.
  3. Ширина заголовков таблицы должна составлять 100% ширины окна, несмотря на ширину таблицы (как в примере ниже).

В настоящее время условия 2 и 3 выполнены, но я получаю таблицы, выровненные по левому краю. Поскольку HTML генерируется автоматически, все, что я могу сделать, - это создать собственный файл CSS и изменить его (я не могу изменить HTML).

Вопрос: Как получить таблицы с выравниванием по центру, изменив только CSS?

Вот упрощенный пример моей проблемы: 

table {
    display: block;
    margin: 25px auto;
    overflow-x: auto;
}

table caption {
  display: block;
}

table caption span {
  font-weight: bold;
}

table td, table th {
    padding: 0px 15px;
}

table tr:nth-child(2n) {
    background-color: #fbeecb;
}
<!DOCTYPE HTML>
<html>
<body>
  
  <table>
    <caption>
      <span id="tab:tbl-1">Table 15.1: </span>
      Table caption, table caption, table caption, table caption, table caption,
      table caption, table caption, table caption, table caption, table caption,
      table caption, table caption, table caption, table caption, table caption,
      table caption, table caption, table caption.
    </caption>
    <thead>
      <tr class="header"><th align="right">xxxxxxxxxxxxxxxxxxx</th><th align="right">y</th></tr>
    </thead>
    <tbody>
      <tr><td>164.2</td><td>1.876087608760</td></tr>
      <tr><td>118.8</td><td>1.9317</td></tr>
      <tr><td>180.4</td><td>2.0957</td></tr>
      <tr><td>184.0</td><td>2.0969</td></tr>
    </tbody>
  </table>

  <table>
    <caption>
      <span id="tab:tbl-2">Table 15.2: </span>
      Table caption, table caption, table caption, table caption, table caption,
      table caption, table caption, table caption, table caption, table caption,
      table caption, table caption, table caption, table caption, table caption,
      table caption, table caption, table caption.
    </caption>
    <thead>
      <tr><th>x</th><th>y</th><th>xxxxxxxxxxxxxxxxxxx</th><th>y</th><th>x</th><th>y</th><th>x</th><th>y</th><th>x</th><th>y</th><th>x</th><th>y</th></tr>
    </thead>
    <tbody>
      <tr><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.876087608760</td></tr>
      <tr><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td></tr>
      <tr><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td></tr>
      <tr><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td></tr>
    </tbody>
  </table>


</body>
</html>

Ответы [ 2 ]

0 голосов
/ 10 апреля 2020

Не устанавливайте display: block для каких-либо тегов таблицы, для таблиц по умолчанию display: table. Эти стили придают уникальное поведение тегам таблицы, которые делают их больше, чем просто div (что, в сущности, является тегом, когда он имеет display: block).

Атрибут align (например, <th align="right">... ) устарела - используйте style="text-align: right".

После удаления конфликтующих стилей display: block - margin: 25px auto; центрирует все таблицы.

Заголовок по умолчанию не может превышать ширина таблицы, если не используется caption-side: top-outside. К сожалению, это работает только для Firefox браузеров . Единственное правильное решение - разместить тег блока за пределами таблицы.

Из-за различий в ширине таблиц каждый из них должен быть заключен в тег блока, а затем все обернуто в другой элемент блока.

У меня была такая же проблема на работе - серверная часть динамически генерировала эти уродливые таблицы, над которыми у меня не было никакого контроля. Единственное решение - применить JavaScript после того, как таблицы были обработаны. Следующая демонстрационная программа имеет необходимые JavaScript для достижения всех целей с действительными (но некрасивыми) HTML и CSS.

Демо 

/*
Insert <main> into <body>
*/
const main = document.createElement('main');
document.body.insertAdjacentElement('afterbegin', main);

/*
Wrap a <section> around each <table> and insert each <section> into <main>
*/
const tabs = document.querySelectorAll('table');
tabs.forEach(t => {
  const sec = document.createElement('section');
  t.parentNode.insertBefore(sec, t);
  sec.appendChild(t);
  document.querySelector('main').insertAdjacentElement('beforeend', sec);
});

/*
Create and insert a <div class='caption'> above each <table>
Take the content of the corresponding <caption> and render it into div.caption
remove all <caption>
*/
const caps = document.querySelectorAll('caption');
caps.forEach(cap => {
  let html = `<div class='caption'></div>`;
  cap.closest('table').insertAdjacentHTML('beforebegin', html);
  const newCap = cap.closest('table').previousElementSibling;
  newCap.innerHTML = cap.innerHTML;
  cap.remove();
});

/*
Remove the align attributes from each <th> and add .right class
*/
const rth = document.querySelectorAll('th[align=right]');
rth.forEach(cell => {
  cell.removeAttribute('align');
  cell.classList.add('right');
});
main {
  width: 100vw;
  padding: 0 20px;
  overflow-x: visible;
}

section {
  min-width: 100%;
  width: min-content;
}

table {
  margin: 25px auto;
  overflow-x: auto;
}

.caption {
  min-width: 100%;
  margin-bottom: -20px;
}

.caption span {
  font-weight: bold
}

td,
th {
  padding: 0px 15px;
}

.right {
  text-align: right;
}

table tr:nth-child(2n) {
  background-color: #fbeecb;
}
<!DOCTYPE HTML><html><body><table><caption> <span id="tab:tbl-1">Table 15.1: </span>Table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption.X</caption><thead><tr><th align='right'>xxxxxxxxxxxxxxxxxxx</th><th align='right'>y</th></tr></thead><tbody><tr><td>164.2</td><td>1.876087608760</td></tr><tr><td>118.8</td><td>1.9317</td></tr><tr><td>180.4</td><td>2.0957</td></tr><tr><td>184.0</td><td>2.0969</td></tr></tbody></table><table><caption> <span id="tab:tbl-2">Table 15.2: </span>Table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption, table caption.</caption><thead><tr><th>x</th><th>y</th><th>xxxxxxxxxxxxxxxxxxx</th><th>y</th><th>x</th><th>y</th><th>x</th><th>y</th><th>x</th><th>y</th><th>x</th><th>y</th></tr></thead><tbody><tr><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.8760</td><td>164.2</td><td>1.876087608760</td></tr><tr><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td><td>118.8</td><td>1.9317</td></tr><tr><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td><td>180.4</td><td>2.0957</td></tr><tr><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td><td>184.0</td><td>2.0969</td></tr></tbody></table></body></html>
0 голосов
/ 10 апреля 2020

просто используйте css caption-side: top-outside;

table {
  border-collapse: collapse;
  border: 1px solid green;
  margin: 2em auto;
  overflow-x: auto;
  caption-side: top-outside;
}
td, th {
  border: 1px solid grey;
  padding: 0px 15px;
  height: 1em;
  width: 110px;
  text-align: center;
}
th {
  text-align: right;
}
table caption span {
  font-weight: bold;
}
table tr:nth-child(2n) {
  background-color: #fbeecb;
}
<table>
  <caption> <span id="tab:tbl-1">Table 15.1: </span> 
    Table caption, table caption, table caption, table caption, table caption,
    table caption, table caption, table caption, table caption, table caption,
    table caption, table caption, table caption, table caption, table caption,
    table caption, table caption, table caption.</caption>
  <thead>
    <tr class="header"><th>xxxxxxxxxxxxxxxxxxx</th><th>y</th></tr>
  </thead>
  <tbody>
    <tr><td>164.2</td><td>1.876087608760</td></tr>
    <tr><td>118.8</td><td>1.9317</td></tr>
    <tr><td>180.4</td><td>2.0957</td></tr>
    <tr><td>184.0</td><td>2.0969</td></tr>
  </tbody>
</table>
...