When colspan property doesn’t appear to work in Firefox or Safari
When building web applications I often use display styles to show or hide divs or table rows as needed. On one project, I found that the “colspan” property did not seem to work in Firefox or Safari. This was because I had incorrectly used “display:block” to style the TR element, instead of “display:table-row.” A demo is below, and the code follows.
Demo using “display:block”
| I used display:block on this table. This th should span 3 columns | ||
|---|---|---|
| cell 1 | cell 2 | cell 3 |
Demo using “display:table-row”
| I used display:table-row on this table. This th should span 3 columns | ||
|---|---|---|
| cell 1 | cell 2 | cell 3 |
The Code that produced the two tables above:
<table border=1>
<tr style="display:block">
<th colspan="3">
Using display:block on this table. This th should span 3 columns
</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
</table>
<table border=1>
<tr style="display:table-row">
<th colspan="3">
Using display:table-row on this table. This th should span 3 columns
</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2 </td>
<td>cell 3</td>
</tr>
</table>
Thank you so much! This is the only place I could find the answer in simple, and straightforward terms.
Use “table-row”, no “block” when styling a TR. Perfect!
Thank you,
David
thanks man!! why is “table-row” and not “block”?
This fixed my issue!
Mine was a table cell instead of a table row. Looking at your explanation, I took a wild guess that I needed to use “display:table-cell”. It worked like a charm.
Thanks!
Il helped me a lot!
Since this is now a 3 year old post, the browsers may have changed a bit, and the solution I present here may not have worked back then.
I had this problem today, and this answer indirectly solved it for me, after I got curious and started experimenting.
It seemed that I, by mistake, copied a “diplay: block” attribute from another CSS style while building my table’s styles, and that was the reason for this strange behaviour.
The “diplay: block” was in a TD style, while the row that did not span all columns was styled as a TH, oddly enough. i.e.
Example:
<table …>
<tr>
<TH colspan=”3″ style=”border: 0; whatever…”>My headline</th>
</tr>
<tr>
<TD style=”DISPLAY: BLOCK”>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
The points of interest above are capitalized. The “My headline” text spanned only one cell despite the “colspan”.
Removing the “display: block” from the TD style immediately solved the problem, and the TH spanned all 3 rows of my table.
The problem was only found (and solved) with Firefox. Opera, Chrome and IE all worked as expected.
It seems the various browsers will default the “display: block|table-row|table-cell|table-footer-group|etcetc…” appropriately, so if you get this silly problem, simply removing the “display” style and letting things default might just work for you too.
Thanks for posting this, very helpful.
thanks for idea. I was once a block then i will use table-row 🙂
I spent so many hours trying to figure this out. Thank You So Much for posting this solution !!
Thanks much for this post mate
Worked perfect. Thanks.
Thanks! You saved me a lot of time! I appreciate people who post answers to simple but time consuming problems. Thanks again!
hey it wont work in IE
I just could not see what the problem was with my colspan and now I feel stupid. It is always the simple stuff that will have you pulling your hair out. Thank you.
Good call, thanks for this!
Thank you! Solved a big hassle!
Your post saved my time a lot. Excellent Job .. Well done
I had a row with three <th>’s with colspan. The recommended fix did not work. In fact it came out weird. From what I can tell, Firefox is centered in first column, the additional columns being ignored.
Thanks.. you save me from a headache
—–