Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Colspan all columns

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?

like image 526
Bob Avatar asked Dec 29 '08 21:12

Bob


People also ask

Can you set Colspan in CSS?

Yes, you can style colspan in CSS. All you need is a CSS attribute selector to manipulate the appearance of the CSS table colspan.

What does Colspan 3 mean?

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>

What does td colspan do?

The colspan attribute defines the number of columns a cell should span.


2 Answers

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.

like image 88
Cluxter Avatar answered Oct 05 '22 12:10

Cluxter


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.

like image 27
Nahom Tijnam Avatar answered Oct 05 '22 12:10

Nahom Tijnam