Проблема с шириной контейнера - PullRequest
Новая
       22

Проблема с шириной контейнера

2 голосов
/ 05 мая 2011

Может кто-нибудь сказать мне, почему внешний div не расширяется до ширины страницы? Есть ли какое-то решение для этого, не удаляя объявление doctype (если я удаляю doctype, он расширяется)? Также моя страница находится в отключенном режиме js. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
    </head>
    <body>
    <div style="border:1px solid #ff0000;">

        <div>
            <table class="storeList">
                <thead>
                    <tr>
                        <th>
                            Country Code
                        </th>
                        <th>
                            Store ID
                        </th>
                        <th>
                            Store Name
                        </th>
                        <th>
                            TownName
                        </th>
                        <th class="actions">
                            Store Operation
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            TEST
                        </td>
                        <td>
                            TEST
                        </td>
                        <td>
                            hghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjhghjgdkjvhkjhvhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjdhgfdhf
                        </td>
                        <td>
                            TEST
                        </td>
                        <td class="actions">
                            TEST ACTIONS
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</body>
</html>

Ответы [ 3 ]

2 голосов
/ 06 мая 2011

Этот ответ работает, обещай!

К вашему внешнему значению div (<div style="border:1px solid #ff0000;">) добавьте либо:

  • float: left или;
  • display: inline-block.

Если вы хотите увидеть демонстрации этих двух исправлений, проверьте приведенные мною более старые ответы:

0 голосов
/ 05 мая 2011

Вы также можете установить ширину таблицы на 100%, чтобы охватить область, предоставленную div 

table { width: 100%; }
0 голосов
/ 05 мая 2011

Вероятно, это связано с тем, что браузеры применяют свой собственный стиль по умолчанию, который включает поля и отступы для различных элементов. Тэг body, вероятно, имеет отступ по умолчанию, поэтому вам нужно добавить файл «сброс CSS» на страницу, чтобы сбросить эти значения по умолчанию, или просто попробуйте: 

<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
</style>

В заголовке вашей страницы. Также, чтобы отметить, похоже, что вы используете таблицы для разметки. Это большой нет нет в современном современном мире CSS:

http://www.hotdesign.com/seybold/

http://www.mardiros.net/css-layout.html

Почему бы не использовать таблицы для разметки в HTML?

...