Странная ошибка таблицы HTML - PullRequest
Новая
       2

Странная ошибка таблицы HTML

0 голосов
/ 18 февраля 2012

Я создал Карту Бинго, используя Таблицу в HTML. Во втором столбце, если я использую букву I, размер столбца автоматически уменьшается, и если я использую любую другую букву, размер столбца возвращается к нормальному. Почему так происходит?

Изображение таблицы (с использованием I в столбце 2): http://imageshack.us/photo/my-images/21/18575712.png/

Изображение таблицы (с использованием A в столбце 2): http://imageshack.us/photo/my-images/580/11014314.png/

<html>
<head>
    <title>Bingo Card</title>
</head>

<body>
    <h2>Bingo Card</h2>
    <table border="1px" width="50%">
        <tr>
            <th>B</th>
            <th>A</th>
            <th>N</th>
            <th>G</th>
            <th>O</th>
        </tr>

        <tr>
            <td id="square0">&nbsp;</td>
            <td id="square1">&nbsp;</td>
            <td id="square2">&nbsp;</td>
            <td id="square3">&nbsp;</td>
            <td id="square4">&nbsp;</td>
        </tr>

        <tr>
            <td id="square5">&nbsp;</td>
            <td id="square6">&nbsp;</td>
            <td id="square7">&nbsp;</td>
            <td id="square8">&nbsp;</td>
            <td id="square9">&nbsp;</td>
        </tr>

        <tr>
            <td id="square10">&nbsp;</td>
            <td id="square11">&nbsp;</td>
            <td id="square12">&nbsp;</td>
            <td id="square13">&nbsp;</td>
            <td id="square14">&nbsp;</td>
        </tr>

        <tr>
            <td id="square15">&nbsp;</td>
            <td id="square16">&nbsp;</td>
            <td id="square17">&nbsp;</td>
            <td id="square18">&nbsp;</td>
            <td id="square19">&nbsp;</td>
        </tr>

        <tr>
            <td id="square20">&nbsp;</td>
            <td id="square21">&nbsp;</td>
            <td id="square22">&nbsp;</td>
            <td id="square23">&nbsp;</td>
            <td id="square24">&nbsp;</td>
        </tr>
    </table>
</body>
</html>

Ответы [ 4 ]

2 голосов
/ 18 февраля 2012

Я вижу ту же проблему в Chrome, когда столбец 2 содержит A. Если вы хотите иметь гарантированную ширину столбца, вы должны явно определить его размер, используя тег <colgroup> или соответствующий атрибут width: 

<table border="1px" width="50%">
  <colgroup>
    <col width="20%"></col>
    <col width="20%"></col>
    <col width="20%"></col>
    <col width="20%"></col>
    <col width="20%"></col>
 </colgroup>
...

или 

<tr>
  <th style="width:20%">B</th>
  ...

Браузеры просто не дают никаких гарантий, если вы явно не определите ширину для разных столбцов.

ОБНОВЛЕНИЕ: из спецификации HTML4 :

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

1 голос
/ 18 февраля 2012

Я думаю, что каждый символ занимает некоторое пространство, ширина которого меньше, чем A, чтобы получить разрешение, используйте стиль CSS td {width: 20%}, это должно быть разрешено

1 голос
/ 18 февраля 2012

Вы можете попробовать изменить ширину столбца с помощью css ...

И я думаю, что это происходит из-за того, что буква «я» «тонкая» по сравнению с другими буквами, но я не уверен в этом ...

0 голосов
/ 18 февраля 2012

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

Способ предотвратить это - использовать «фиксированный» макет таблицы, например, 

<style>
table { table-layout: fixed; }
th { width: 20%; }
</style>

«Фиксированный» макет имеет свои последствия. Например, если содержимое не подходит, оно будет усечено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...