Как центрировать таблицу в css

Как центрировать таблицу с подписью на всю страницу

У меня есть много таблиц на моих веб-страницах, которые мне нужно центрировать с их подписями. Установка свойств margin-left и margin-right в основном работает; однако многие из этих таблиц также узкие, а заголовки достигают ширины только самих таблиц.

Screenshot of the example

Вот что я пробовал:

  • Явная установка ширины заголовка ( width: 100% ): при этом таблица просто смещается по центру, потому что элементы thead и tbody внутри table не центрированы.
  • Настройка таблицы для использования модели flexbox ( display: flex; flex-direction: column; align-items: center; ): thead и tbody не выровнены друг с другом, и это не учитывает свойство заголовка caption-side .

На приведенном ниже снимке экрана (созданном в LaTeX) показано, что я хочу с точки зрения выравнивания.

What I want in terms of alignment (LaTeX rendering)

Есть ли способ расположить по центру и таблицу, и заголовок, при этом изящно работая с узкими таблицами?

Простой способ центрировать таблицу с помощью CSS

Одна строка кода – все, что вам нужно для центрирования таблицы

Каскадные таблицы стилей (CSS) – это язык таблиц стилей, наиболее часто используемый для установки визуального стиля веб-страниц, написанных на HTML и XHTML. Вы можете быть новичком в веб-дизайне или CSS и иметь вопросы о том, как центрировать таблицу на веб-странице. Вы также можете быть опытным дизайнером, который не понимает, как выполнять эту технику сейчас, когда тег CENTER и атрибут align = “center” в теге TABLE устарели. С помощью CSS центрирование таблиц на веб-странице совсем не сложно.

Используйте CSS для центрирования таблицы

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

или вы можете добавить эту же строку в таблицу напрямую:

Когда вы размещаете таблицу на веб-странице, вы помещаете ее в элемент уровня блока, такой как BODY, P, BLOCKQUOTE или DIV. Вы можете центрировать таблицу внутри этого элемента, используя стиль margin: auto; . Это говорит браузеру, чтобы поля были на всех сторонах таблицы равными, что позиционирует таблицу в центре веб-страницы.

Некоторые старые веб-браузеры не поддерживают этот метод

Если ваш сайт должен поддерживать более старый веб-браузер, такой как Internet Explorer 6, вам нужно продолжать использовать align = “center” или тег CENTER для центрирования ваших таблиц. Это единственная сложность, с которой вы столкнетесь при центрировании своих таблиц на веб-странице. Использование этой техники легко и может быть выполнено в считанные минуты.

Попытка центрировать таблицу в таблице с помощью CSS

Я работаю над этим проектом, и у меня есть этот макет, который хорошо работает практически во всех разрешениях экрана, и я пытаюсь поместить последние штрихи на разрешение экрана меньше, чем 745px. Но у меня есть две таблицы в другой ячейке таблицы, которые не будут выравниваться так, как должны. Я использую margin: 0px auto; в CSS, но они не будут делать то, что я им говорю, хотя все, что я знаю о CSS, говорит, что оно должно работать.Попытка центрировать таблицу в таблице с помощью CSS

При более высоких разрешениях экрана этим двум таблицам предлагается плавать влево и вправо от их родительской ячейки, что делает их очень хорошо. Но когда я изменяю CSS-код при разрешении экрана меньше 745 пикселей, я говорю им: block; margin: 0px auto; которые должны сосредоточить их в своей камере, но это не так. Я делаю что-то неправильно?

ответ

Поскольку float все еще активен (или должен быть) попытайтесь добавить float:none, or float:none !important; переопределить затора различных "выравниваний"

YAY! Это полностью сработало! Большое спасибо =) –

не проблема, будьте осторожны с @media, даже если вы установили новый набор правил, он по-прежнему вызовет все остальные коды, подумайте о предоставлении ‘@media min-width и max-width’, поэтому что переполняющий css не запускает – Nec

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *