html – Colspan all columns

html – Colspan all columns

Just use this:

colspan=100%

It works on Firefox 3.6, IE 7 and Opera 11! (and I guess on others, I couldnt 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.

html – Colspan all columns

If you want to make a title cell that spans all columns, as header for your table, you may want to use the caption tag (http://www.w3schools.com/tags/tag_caption.asp / https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption) This element is meant for this purpose. It behaves like a div, but doesnt span the entire width of the parent of the table (like a div would do in the same position (dont try this at home!)), instead, it spans the width of the table. There are some cross-browser issues with borders and such (was acceptable for me). Anyways, you can make it look as a cell that spans all columns. Within, you can make rows by adding div-elements. Im not sure if you can insert it in between tr-elements, but that would be a hack I guess (so not recommended). Another option would be messing around with floating divs, but that is yuck!

Do

<table>
    <caption style=gimme some style!><!-- Title of table --></caption>
    <thead><!-- ... --></thead>
    <tbody><!-- ... --></tbody>
</table>

Dont

<div>
    <div style=float: left;/* extra styling /*><!-- Title of table --></div>
    <table>
        <thead><!-- ... --></thead>
        <tbody><!-- ... --></tbody>
    </table>
    <div style=clear: both></div>
</div>

Related posts:

• Sending HTML email using Python.
• Python HTML generator.
• filesystems – Python causing: IOError: [Errno 28] No space left on device: ../results/32766.html on disk with lots of space.
• Python HTML Encoding xc2xa0.
• Simple HTML template in Python.
• html – Issue piping variables into popen command with Python Azure CLI.
• html – Python follow redirects and then download the page?
• html – Checking if element exists with Python Selenium.
• Get html using Python requests?
• html – Flask Python Buttons.