20

I have a table according to below. The second row has defined three columns, one with colspan=8 and the others with colspan=1. Still, the cells are not stretched according to the colspan, the "width" are a little bit more for second cell and widest for the third. 

<table class="floating simpletable">
    <tbody>
        <tr><td colspan="10">1st row</td></tr>
        <tr><td colspan="8">Column 1 -&gt; Least wide</td><td colspan="1">2nd</td><td colspan="1">3rd</td></tr>
        <tr><td colspan="10">3rd row</td></tr>
        <tr><td colspan="1">1st cell</td><td colspan="9">4th row</td></tr>
    </tbody>
</table>

What's the problem and how to fix it?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Nicsoft
  • 3,644
  • 9
  • 41
  • 70

3 Answers3

27

The widths of cells depend on cell contents, HTML and CSS settings for widths, browser, and possibly phase of the moon. The colspan attribute just specifies how many columns (hence, how many slots in the grid for the table) a cell occupies.

If you see the last cell of row 2 as the widest, then the reason is probably that it has most contents (or there is a width setting for it). Your demo code does not demonstrate such behavior.

If you don’t want the column widths adjust to the size requirements of cells, set the widths explicitly in CSS (or in HTML). Before this, it is best to remove all unnecessary complications from the table structure. If your demo code reflects the entire structure, then columns 2 through 8 are an unnecessary division, i.e. they could be turned to a single column. Demonstration (with poor-style pixel widths just for definiteness):

<table class="floating simpletable" border>
    <col width=100><col width=100><col width=100>
    <tbody>
        <tr><td colspan="4">1st row</td></tr>
        <tr><td colspan="2">span 1</td><td>span 2</td><td>span 3 </td></tr>
        <tr><td colspan="4">3rd row</td></tr>
        <tr><td>span</td><td colspan="3">other span</td></tr>
    </tbody>
</table>

Without a rewrite like this, I’m afraid your table violates the table model of HTML, as currently there is no cell that starts in column 3 or column 4 or...

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • My example is the actual one that's not working. But your suggestion adding one tag for each column solved it. I added ten of those and set the width=10% for each. Thanks! But in your example you added only three , shouldn't it be four of them since you use colspan=4? – Nicsoft Feb 13 '12 at 09:11
  • In my demo, the last column just takes what it needs. To achieve what I think you are aiming at, you could use (when using my markup) ` `. Your approach of ten columns each 10% wide is probably not robust, as it does not fix the table model issue. – Jukka K. Korpela Feb 13 '12 at 09:23
  • Ok, I understand why you left out the last col. But reading about the table model, the client should use the to decide the number of columns, so I guess it is not wrong having one for each column. Could you please explain why my way isn't as robust as your way? Perhaps I lack som understanding of the table model... – Nicsoft Feb 13 '12 at 10:22
  • The HTML5 text on table model is rather complicated and formal: http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#table-model But if you use the validator http://validator.w3.org to check the code you originally posted, with ` ` inserted at the start, it says: “Table columns in range 3…8 established by element td have no cells beginning in them.” Note: my proposed markup does not conform to HTML5 drafts, as they would require a fourth `` element (for logical reason—you don’t need to set its width, and HTML5 doesn’t even allow doing that in HTML). – Jukka K. Korpela Feb 13 '12 at 20:40
  • 1
    "and possibly phase of the moon" :)) – Flavius Frantz Jul 28 '14 at 09:02
8

colspan determines how many columns a cell overlaps, not the size of those columns. Use the CSS width property to specify the width of things.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • It's actually no of cells I'm meaning, just my phrasing that perhaps was a bit unclear. I'll fix it. – Nicsoft Feb 13 '12 at 08:18
0

Only display: table-cell implements the behavior for colspan, so applying any other display value would cause the attribute to be ignored.

If you want to use some other display algorithm for the content of a cell you could use a wrapper:

<td colspan="2"> <!-- the cell is still `display: table-cell` -->

  <div style="display: grid"> <!-- the wrapper can have any `display` rule you need -->

    <!-- the cell content -->

  </div>

</td>
cmolina
  • 973
  • 1
  • 11
  • 21