【问题标题】:Colspan doesn't work with <td> width set? (IE7)Colspan 不适用于 <td> 宽度设置? (IE7)
【发布时间】:2013-02-12 00:36:29
【问题描述】:

当我使用固定宽度 (IE 7) 时,我无法让 colspan 工作?为什么?!

示例代码:

<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>

帮助任何人? :(

【问题讨论】:

    标签: html html-table


    【解决方案1】:

    确实如此,但您限制了宽度。如果需要,请尝试创建另一个名为 '.doubleSpanInputGroup' 的类或宽度为 500 的类,并将该类设置到跨越列上。

    例如。

    <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>
    

    编辑:使新样式更具层次感

    【讨论】:

    • 哇哦。谢谢,有时您只是看不到眼前的事物。
    • 是的,没有问题,容易出错。请确保你使用我上面的修改版本,因为第一遍有一个小问题:) woops.
    【解决方案2】:

    尝试将规则应用于tr 而不是td,并将宽度设为 500px,如下所示:

    .inputGroup tr { width: 500px; }
    

    您遇到的问题是因为您已将 td 的宽度限制为最多 250 像素,因此浏览器只是按照您的说明进行操作。

    【讨论】:

      【解决方案3】:

      一般方式:

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

      如果这是唯一的宽度,那么所有第一列都采用这个宽度,并且 ie7 中的 colspan 将起作用

      【讨论】:

        【解决方案4】:

        我尝试将 colspan 单元格的宽度设置为自动,在 IE7/8/9 中似乎可以正常工作

        .yourColSpanTD { width: auto !important; }
        

        【讨论】:

          猜你喜欢
          • 2011-03-19
          • 1970-01-01
          • 1970-01-01
          • 2012-03-30
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2013-11-16
          • 2017-01-30
          相关资源
          最近更新 更多