Element (table ..."> Element (table ...">Combining Colspan And Style="width:10px;" On Element (table ...

I'd like to understand why style="width:10px" applies to each column and not to the cell when I use it as follows:

<td colspan="2" style="width:10px;">1</td>

Effectively, it appears that this creates a cell whose width is 20px. It appears to be multiplying the width by the colspan. Is this just how the table model works to ensure the width adds up correctly for the row? Is it defined somewhere? Is it possible for me to have the width apply to the cell as a whole instead (this is the more natural way for me to read this) rather than each of the columns it spans? I.e. I was expecting this to create a cell of width 10 pixels and not 20 pixels, but I can imagine why this may be the case.

Also, I am curious to know if I can expect a consistent browser experience if tables are embedded in tables, where the inner table has cells whose width adds up to more than the width of the cell of the containing table i.e.:

<table border="1" cellpadding="0" cellspacing="0"> <tr> <td colspan="1" style="width:10px;">1</td> <td colspan="1" style="width:10px;"> <table border="1" cellpadding="0" cellspacing="0"> <tr><td colspan="1" style="width:10px;">1</td><td colspan="1" style="width:10px;">2</td></tr> <tr><td colspan="1" style="width:10px;">3</td><td colspan="1" style="width:10px;">4</td></tr> </table> </td> </tr> <tr> <td colspan="1" style="width:10px;">3</td> <td colspan="1" style="width:10px;">4</td> </tr>

In that example, the inner table has a width of 22 pixels. The cell in which it is embedded has a width of 10 pixels. I've checked on browsers and it seems this behaves consistently on recent browsers, though the issue is that it crunches some of the columns and makes them a width I didn't intend them to be. Is the expected/correct behavior for situations such as this defined anywhere?

Thank you very much for any help with this! Also, if there is a better place to ask such a question, I'm happy to hear that as well.

Từ khóa » Html Td Colspan Style