奇怪的HTML表格错误

我使用HTML中的表格创建了宾果卡片。在第二列中，如果我使用字母I，则列的大小会自动减小，如果我使用任何其他字母，那么列的大小会恢复正常。为什么它发生如此呢？奇怪的HTML表格错误

表格图像（在第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>

来源

2012-02-18 sandbox

检查它在Firefox和Chrome。 – sandbox 2012-02-18 13:26:04

你想寻求解决办法或u想要的确切原因 – Prabhavith 2012-02-18 13:26:54

@Prabhavith两个 – sandbox 2012-02-18 13:28:13

我看到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> 
    ...

的浏览器只是没有如果任何保证您不明确定义不同列的宽度。

UPDATE：从HTML4 specification：

如果作者指定为列没有宽度信息，用户代理可能不能够以增量格式化表，因为它必须等待整个数据列到达以便分配一个合适的宽度。

来源

2012-02-18 13:28:43 home

你可以尝试改变与CSS列宽...

而且我认为它的发生是因为信相比其他字母“I”是“瘦”的，但我不知道那......

来源

2012-02-18 13:32:10 matan7890

我觉得每个角色需要一些空间，我的宽度小于A，以得到解决使用CSS样式 TD {宽度：20％}这应该得到解决

来源

2012-02-18 13:32:26 Prabhavith

在这个简单的情况下，对于大多数浏览情况来说，将列宽设置为相同（20％）就足够了。但是，一般来说，HTML和CSS中的表格单元格和列宽度设置仅仅是建议，并且可以根据内容需求由浏览器覆盖。（你可以看到这一点，如果你在这里使用一个很窄的浏览器窗口的宽度）。

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

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

“固定”布局有其影响。例如，如果内容不合适，它将被截断。

来源

2012-02-18 14:10:22

奇怪的HTML表格错误

回答

相关问题