CODEWITHSUNDEEP
htmlxhtml
sandbox
sandbox

Reputation: 2679

Strange HTML Table Error

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>

Upvotes: 0

Views: 493

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

In this simple case, it suffices, for most browsing situations, to set the column widths to the same (20%). However, in general, table cell and column width settings in HTML and CSS are just suggestions and may be overridden by browsers, on the basis of the contents requirements. (You can see this if you use a very narrow browser window width here.)

The way to prevent this is to use “fixed” table layout, e.g.

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

“Fixed” layout has its implications. For example, if the content does not fit, it will get truncated.

Upvotes: 0

home
home

Reputation: 12538

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.

Upvotes: 2

Prabhavith
Prabhavith

Reputation: 476

I think each character takes some space the width of i is less than A, to get resolved use a css style td{width:20%} this should get resolved

Upvotes: 1

matan7890
matan7890

Reputation: 548

You could try change the column width with css...

And I think it's happening because of the letter 'I' is "thin" compared to other letters, but I don't sure about that...

Upvotes: 1

Related Questions