Home/ Questions/Q 7515879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T00:57:11+00:00

I created a Bingo Card using Table in HTML. In the second column if

  • 0

I created a Bingo Card using Table in HTML. In the second column if I use the letter I, the size of the column automatically reduces and if I use any other letter then size of column comes back to normal. Why its happening so?

Table Image (using I in Column 2): http://imageshack.us/photo/my-images/21/18575712.png/

Table Image (using A in Column 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see the same issue in Chrome when column 2 contains an A. If you want to have a guaranteed column width you should explicitly define its size using either the <colgroup> tag or a corresponding width attribute:

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

    or

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

    The browsers just does not make any guarantee if you do not explicitily define the widths for the different columns.

    UPDATE: From the HTML4 specification:

    If an author specifies no width information for a column, a user agent
    may not be able to incrementally format the table since it must wait
    for the entire column of data to arrive in order to allot an
    appropriate width.

    • 0