Установить ширину таблицы через стили - «Таблицы» » Новости мира Интернет
Google добавила режим Split View в Chrome и аннотации в PDF - «Новости мира Интернет»
Google добавила режим Split View в Chrome и аннотации в PDF - «Новости мира Интернет»
В Paint добавили функцию произвольного вращения области на любой угол - «Новости мира Интернет»
В Paint добавили функцию произвольного вращения области на любой угол - «Новости мира Интернет»
MacBook Pro на M6 получит OLED, сенсорный экран и Dynamic Island - «Новости мира Интернет»
MacBook Pro на M6 получит OLED, сенсорный экран и Dynamic Island - «Новости мира Интернет»
Что нового показали Samsung на Galaxy Unpacked 2026 - «Новости мира Интернет»
Что нового показали Samsung на Galaxy Unpacked 2026 - «Новости мира Интернет»
Самый дешёвый тариф YouTube Premium теперь предлагает фоновый режим и скачивание видео - «Новости сети»
Самый дешёвый тариф YouTube Premium теперь предлагает фоновый режим и скачивание видео - «Новости сети»
Twitch отказался от блокировок «всё или ничего» и разделил наказания - «Новости сети»
Twitch отказался от блокировок «всё или ничего» и разделил наказания - «Новости сети»
Китай намерен увеличить выпуск передовых чипов в 25 раз к концу десятилетия - «Новости сети»
Китай намерен увеличить выпуск передовых чипов в 25 раз к концу десятилетия - «Новости сети»
Тим Кук признался, что «спал с одним открытым глазом» после секретного брифинга ЦРУ о Тайване и TSMC - «Новости сети»
Тим Кук признался, что «спал с одним открытым глазом» после секретного брифинга ЦРУ о Тайване и TSMC - «Новости сети»
Суперсила, помноженная на два: в Японии IBM впервые смогла обеспечить бесшовную работу суперкомпьютера с квантовым - «Новости сети»
Суперсила, помноженная на два: в Японии IBM впервые смогла обеспечить бесшовную работу суперкомпьютера с квантовым - «Новости сети»
Что изменилось в Gemini Pro с обновлением до версии 3.1 - «Новости мира Интернет»
Что изменилось в Gemini Pro с обновлением до версии 3.1 - «Новости мира Интернет»
Новости мира Интернет » Самоучитель CSS » Таблицы » Установить ширину таблицы через стили - «Таблицы»
Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Установить ширину таблицы в пикселах или процентах через стили.

Решение

Для определения ширины таблицы используйте стилевое свойство width, применяя его к селектору table, как показано в примере.;1.

Пример 1. Ширина таблицы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ширина таблицы</title>
  <style>
   table {
    width: 100%; /* Ширина таблицы в процентах */
   
   .col1 {
    width: 100px; /* Ширина ячейки */
   
  </style>
 </head>
 <body>
  <table border="1">
   <tr>
    <td class="col1">Колонка 1</td>
    <td class="col2">Колонка 2</td>
   </tr>
  </table>
 </body>
</html>

В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 100px. Это достигается за счёт добавления свойства width к селектору td с именем определённого класса (<td class="col1">).

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


Internet Explorer Chrome Opera Safari Firefox Android iOS 4.0 1.0 4.0 1.0 1.0 1.0 1.0 Задача Установить ширину таблицы в пикселах или процентах через стили. Решение Для определения ширины таблицы используйте стилевое свойство width, применяя его к селектору table, как показано в примере.;1. Пример 1. Ширина таблицы HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере ширина всей таблицы устанавливается как 100%, а ширина левой колонки 100px. Это достигается за счёт добавления свойства width к селектору td с именем определённого класса ( ). При использовании стилей для изменения ширины таблицы допустимо применять любые допустимые единицы измерения, а не только пикселы и проценты.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Смотрите также

А что там на главной? )))



Комментарии )))