How can I specify a td
tag should span all columns (when the exact amount of columns in the table will be variable/difficult to determine when the HTML is being rendered)? w3schools mentions you can use colspan="0"
, but it doesn't say exactly what browsers support that value (IE 6 is in our list to support).
It appears that setting colspan
to a value greater than the theoretical amount of columns you may have will work, but it will not work if you have table-layout
set to fixed
. Are there any disadvantages to using an automatic layout with a large number for colspan
? Is there a more correct way of doing this?
Yes, you can style colspan in CSS. All you need is a CSS attribute selector to manipulate the appearance of the CSS table colspan.
colspan specifies the number of columns a cell should span. < td colspan="number"> If I have 3 columns and I want a specific row to cover all 3 columns I program the row in this way: <td colspan="3"> </td>
The colspan attribute defines the number of columns a cell should span.
Just use this:
colspan="100%"
It works on Firefox 3.6, IE 7 and Opera 11! (and I guess on others, I couldn't try)
Warning: as mentioned in the comments below this is actually the same as colspan="100"
. Hence, this solution will break for tables with css table-layout: fixed
, or more than 100 columns.
I have IE 7.0, Firefox 3.0 and Chrome 1.0
The colspan="0" attribute in a TD is NOT spanning across all TDs in any of the above browsers.
Maybe not recommended as proper markup practice, but if you give a higher colspan value than the total possible no. of columns in other rows, then the TD would span all the columns.
This does NOT work when the table-layout CSS property is set to fixed.
Once again, this is not the perfect solution but seems to work in the above mentioned 3 browser versions when the table-layout CSS property is automatic. Hope this helps.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With