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

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 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, как я показал в теле, тогда вы настроены.

Ответ 4

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

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

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

Ответ 5

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

table { font-size: 0.9vw; }

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

Ответ 6

Как насчет:

table { 
   width: 100%; 
}

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

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