Question

我在HTML中使用Table创建了一张宾果卡。在第二列中，如果我使用字母I，则列的大小会自动减小，如果我使用任何其他字母，则列的大小会恢复正常。为什么会这样呢？

表格图片（在第2列中使用I）：http://imageshack.us/photo/my-images/21/18575712.png/

表格图片（在第2列中使用A）：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>

Answer 1

当第2列包含A时，我在Chrome中看到了同样的问题。如果您希望保证列宽，则应使用<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 specification：

如果作者未指定列的宽度信息，则为用户代理可能无法逐步格式化表格，因为它必须等待为了分配一整个数据列到达适当的宽度。

Answer 2

您可以尝试使用css ...

更改列宽

而且我认为这种情况正在发生，因为与其他字母相比，字母“我”更“瘦”，但我不确定......

Answer 3

我认为每个角色占用一些空间，i的宽度小于A，以解析使用css样式 td {width：20％}这应该得到解决

Answer 4

在这种简单的情况下，对于大多数浏览情况，它足以将列宽设置为相同（20％）。但是，通常，HTML和CSS中的表格单元格和列宽设置只是建议，可以根据内容要求由浏览器覆盖。（如果你在这里使用非常窄的浏览器窗口宽度，你可以看到这一点。）

防止这种情况的方法是使用“固定”表格布局，例如

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

“固定”布局有其含义。例如，如果内容不适合，则会被截断。

奇怪的HTML表错误

4 个答案: