it-swarm.com.ru

Ширина таблицы HTML не работает

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

    <table border="1" width="100%">

        <tr>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
            <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        </tr>


    </table>




</body>
</html>

Я пытаюсь установить ширину таблицы на 100% для приведенной выше таблицы, но это никак не сказывается на ширине окна. Как я могу изменить ширину таблицы, чтобы она была такого же размера, как окно.

15
user2959594

Проблема в том, что контент внутри вашей таблицы требует больше места, чем 100% ваших предложений размера окна. 

Что вы можете сделать, это использовать свойство overflow CSS. Попробуйте следующий пример и выберите, будет ли это вариант для вас:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
    .table {
        color: green;
        display: block;
        max-width: 100%;
        overflow: scroll; <!-- Available options: visible, hidden, scroll, auto -->
    }
</style>
</head>
<body>

<table border="1" class="table">

    <tr>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
        <td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>


</table>
</body>
</html>

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

18
DonnyDee

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

Вы можете сделать свой контент более узким:

  • Уменьшение количества столбцов
  • использование CSS white-space: nowrap для любого содержимого, поэтому в браузере есть возможность оборачивать это содержимое, чтобы уменьшить ширину.
  • Уменьшите любые поля, границы, отступы, которые у вас есть
  • Уменьшить размер шрифта
  • Используйте Word-wrap:break-Word или Word-break: break-all;
  • Переполните содержимое, которое не умещается в ширину экрана, с помощью overflow: scroll; (ваши параметры видны, скрыты, прокручиваются и автоматически)

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

13
tomsullivan1989

Вы можете поместить элемент в клетки - это то, что я сделал.

<table>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
    <tr>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
        <td><div style="width:200px">YOUR CONTENT</div></td>
    </tr>
</table>
0
Stevoh