Disable changing of width in html table

Question

I'm trying to create a "fixed-width" table, but it somehow changes the column width whenever the data in column is bigger than rest of them.

For example, following table changes the width on the last number, which is 10.

<table>
    <tr>
        <td rowspan="3">1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>
        <td>5</td>
        <td rowspan="2" colspan="2">7</td>
    </tr>
    <tr>
        <td>6</td>
    </tr>
    <tr>
        <td>8</td>
        <td colspan="2">9</td> 
        <td>10</td>
    </tr>
</table>

Here's my CSS:

table {
    border: 1px solid;
    width: 400px;
    height: 300px;
}

Answer 1

There are 2 algorithms for tables in CSS, triggered by the property table-layout:

• table-layout:fixed will adapt cell widths to what the author (you) want, as far as possible
• table-layout:auto (default value) will adapt cell widths to their content.

CSS

  table {
    table-layout: fixed;
    width: 400px;
    height: 300px;
    border: 1px solid;
  }

Here's a fiddle: http://jsfiddle.net/tk4J8/