CODEWITHSUNDEEP
htmlhtml-table
Alex
Alex

Reputation: 77329

Colspan doesn't work with <td> width set? (IE7)

I can't get colspan to work when I use a fixed width (IE 7)? Why?!

Sample Code:

<html>
  <head>
    <style>
    .inputGroup td
    { width:250px; }    
    </style>
  </head>
<body>
<table class="inputGroup">
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td colspan="2">This should span two columns but it doesnt</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
</table>
</body>
</html>

Help anybody? :(

Upvotes: 5

Views: 13273

Answers (4)

koder
koder

Reputation: 48

I tried to set the width of the colspan cells to auto, seemed to work fine in IE7/8/9

.yourColSpanTD { width: auto !important; }

Upvotes: 0

Eran Or
Eran Or

Reputation: 1532

in general manner : 

table tr:first-child td:first-child{ width:86px; }

if this is the only width all first column take this width and colspan in ie7 will work

Upvotes: 0

Deniz Dogan
Deniz Dogan

Reputation: 26227

Try making the rule apply to tr instead of td and make the width 500px instead, as such:

.inputGroup tr { width: 500px; }

The problem you're having is because you've set a limit on the td to be at most 250px wide, so the browser is simply following your instructions.

Upvotes: 1

Luke Schafer
Luke Schafer

Reputation: 9265

it does, but you've limited the width. If you want, try creating another class called '.doubleSpanInputGroup' or something with width 500 and set that class onto the spanning column.

eg.

<html>
  <head>
    <style>
    .inputGroup td
    { width:250px; }   
    .inputGroup td.doubleInputGroup
    { width:500px; } 
    </style>
  </head>
<body>
<table class="inputGroup">
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
  <tr>
    <td colspan="2" class="doubleInputGroup">This should span two columns but it doesnt</td>
  </tr>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
  </tr>
</table>
</body>
</html>

EDIT: made the new style more hierarchical

Upvotes: 7

Related Questions