Как сделать так, чтобы таблица CSS соответствовала ширине экрана? - PullRequest
Новая
       6

Как сделать так, чтобы таблица CSS соответствовала ширине экрана?

23 голосов
/ 21 ноября 2010

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

Ответы [ 7 ]

35 голосов
/ 04 октября 2013

CSS: 

table { 
    table-layout:fixed;
}

Обновление с помощью CSS из комментариев: 

td { 
    overflow: hidden; 
    text-overflow: ellipsis; 
    word-wrap: break-word;
}

Для мобильных телефонов я оставляю ширину таблицы, но назначаю дополнительный класс CSS для таблицы, чтобы включить горизонтальныйпрокрутка (таблица больше не будет перемещаться по экрану мобильного телефона): 

@media only screen and (max-width: 480px) {
    /* horizontal scrollbar for tables if mobile screen */
    .tablemobile {
        overflow-x: auto;
        display: block;
    }
}

Достаточно.

19 голосов
/ 21 ноября 2010

Если таблица content слишком широка (как в в этом примере ), вы ничего не можете сделать, кроме как изменить содержимое, чтобы браузер мог отображать его в более узкий формат. В отличие от предыдущих ответов, установка ширины на 100% не будет иметь абсолютно никакого эффекта, если содержание слишком широкое (как показано в этой ссылке, и эта * ). Браузеры уже пытаются удерживать таблицы в левом и правом полях, если могут, и прибегают к горизонтальной полосе прокрутки, если не могут.

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

  • Уменьшить количество столбцов (возможно, разбив одну мегалитическую таблицу на несколько независимых таблиц).
  • Если вы используете CSS white-space: nowrap для любого содержимого (или старого атрибута nowrap,  , элемента nobr и т. Д.), Посмотрите, можете ли вы жить без них, чтобы браузер имеет возможность оборачивать это содержимое, чтобы уменьшить ширину.
  • Если вы используете очень широкие поля, отступы, границы и т. Д., Попробуйте уменьшить их размер (но я уверен, что вы подумали об этом).

Если таблица слишком широка, но вы не видите веской причины для этого (содержание не такое широкое и т. Д.), Вам придется предоставить больше информации о том, как вы обрабатываете таблицу, окружающие элементы и т. д. Опять же, по умолчанию браузер избегает полосы прокрутки, если может.

7 голосов
/ 21 ноября 2010 
table { width: 100%; }

Не даст точного ожидаемого результата из-за всех полей и отступов, используемых в теле.Так что, если со сценариями все в порядке, используйте Jquery. 

$("#tableid").width($(window).width());

Если нет, используйте этот фрагмент 

<style>
    body { margin:0;padding:0; }
</style>
<table width="100%" border="1">
    <tr>
        <td>Just a Test
        </td>
    </tr>
</table>

. Вы заметите, что ширина идеально охватывает страницу.

Главное слишком аннулировать margin и padding, как я показал на теле, тогда вы настроены.

0 голосов
/ 21 февраля 2018

Поместите таблицу в элемент контейнера, который имеет

переполнения: прокрутки; макс-ширина: 95vw;

или приведите таблицу в соответствие с экраном и переполните ее: прокрутите все ячейки таблицы.

0 голосов
/ 30 июня 2017

Установите font-size в единицах, связанных с шириной области просмотра, например ::10000

table { font-size: 0.9vw; }

Это сделает нечитаемый шрифт, когда страница слишком узкая, но иногда это приемлемо.

0 голосов
/ 11 февраля 2017

Уже есть хорошее решение для этого вопроса. Но все забыли о размере шрифта. Это последнее, но не менее важное решение. Вы можете уменьшить размер шрифта на 2 или 3 пикселя. он все равно будет хорошо виден пользователю, и вы можете уменьшить ширину таблицы. это сработало для меня. так как в моей таблице 5 столбцов, 4 показывает отлично, 5-й вышел из области просмотра. поэтому я уменьшил размер шрифта и все 5 столбцов помещаются на экран 

table th td
{
 font-size:14px;
}

К вашему сведению, если в ваших таблицах слишком много столбцов, но вы не можете уменьшить их размер, уменьшите размер шрифта, чем горизонтальную прокрутку. Есть два преимущества. Ваш стиль для мобильного Интернета останется прежним (хорошо без горизонтальной прокрутки), и когда пользователь увидит маленький размер, большинство пользователей увеличит таблицу до уровня комфорта.

0 голосов
/ 21 ноября 2010

Как насчет: 

table { 
   width: 100%; 
}

Возможно, у вас есть изображения слишком большого размера, из-за которых таблица становится шире.

Также проверьте, как ваша таблица выглядит в других браузерах.

...