Как сделать таблицу CSS подходящей шириной экрана?

Question

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

Answer 1

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

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

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

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

Answer 2

Как насчет:

table { 
    width: 100%; 
} 

Может быть, у вас есть какие-то образы, которые слишком велики, и что приводит к тому, что таблица будет шире.

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

Answer 3

table { width: 100%; } 

Не даст точный результат, которого вы ожидаете, из-за всех полей и прокладок, используемых в теле. Таким образом, скрипты IF являются OKAY, затем используйте 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, как я показал на корпусе, тогда вы настроены.

Answer 4

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; 
    } 
} 

Достаточно достаточно.

Answer 5

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

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

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

Answer 6

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

table { font-size: 0.9vw; }

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

Answer 7

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

переполнение: прокрутка; max-width: 95vw;

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