Ширина таблицы 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% для таблицы выше, но она не влияет на ширину окна. как изменить ширину таблицы так, чтобы она была того же размера, что и окно.

Ответ 1

Проблема заключается в том, что для содержимого внутри вашей таблицы требуется больше места, чем 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 параметра: видимые, скрытые, прокручиваемые и автоматически. В приведенном выше примере показана опция прокрутки, которая добавляет строку прокрутки к самой таблице.

Ответ 2

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

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

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

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

Ответ 3

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

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

Ответ 4

вы можете поместить класс в таблицу, например

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

а из вашего css вы помещаете

  .size{

             width : 100%;

             }

и вы должны поместить ссылку своего css между например:

<link href="css/YOUR_CSS.css" rel="stylesheet" type="text/css" media="all" />