发表新帖
发表新帖

Colspan on cell in one row seems to prevent setting TD width in all the other rows. Why?

后端 未结
关注
4 1476
Happy的楠姐
Happy的楠姐 2020-12-31 09:58

I want to create a table which look like this:

+-----------------------------------------------------------+
|January 12th, 2012
相关标签:
4条回答
  • 我寻月下人不归
    2020-12-31 10:16

    IE always treats width on table cells as min-width, at least up to version 8 (don't know about 9).

    The only way I have found around this is to either specify explicit widths on all the table cells, or to use Javascript to set the width after loading (but before displaying).

    0 讨论(0)
  • 青春惊慌失措
    2020-12-31 10:21

    I would suggest giving those cells a class and then style with

    <style>    
.td_class {width: 20px;}
</style>
    0 讨论(0)
  • 醉梦人生
    2020-12-31 10:22

    I had forgotten that the table has the style 'table-layout: fixed' and this was causing the difficulty. When this style is set the widths of the cells in the first row are applied to all following rows. As the first row contained a colspan I guess IE got confused (FF handles it ok).

    Any way it's not as flexible as I wanted but this worked for me.

    <html>
  <body>
  <div style="width:350px; border:blue 1px solid">
    <table border="0" style="font-family:Arial,Helvetica;font-size:10pt;table-layout:fixed;">
      <tr>
        <td style="width:17px;"/>
        <td style="width:20px;"/>
        <td style="width:180px;"/>
        <td style="width:130px;"/>
      </tr>
      <tr>
        <td colspan="4" style="width:100%;text-align:center;font-eight:bold;background-color:#eef;">09 January 2012</td>
      </tr>
      <tr title="09 January 2012">
        <td align="center" valign="middle" colspan="1" style="width:17px;height:1.1em;"><img src="../../../../_layouts/images/WebParts2010/AWT3_Klein.png" style="border-style:None;border-width:0px;height:1.1em;width:1.1em;" /></td>
        <td align="left" valign="top" colspan="1" style="width:20px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">LO</td>
        <td align="left" valign="top" colspan="1" style="width:180px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Customer Name Ltd.</td>
        <td align="left" valign="top" colspan="1" style="width:120px;height:1.1em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Reason for visiting today</td>
      </tr>
    </table>
  </div>
</body>
</html>
    0 讨论(0)
  • 臣服心动
    2020-12-31 10:37

    As found in this answer you can set attributes for the entire table via colgroup and col. That way you are able to set individual attributes even for the (invisible single) cells inside the colspan in the first row.

    In your example it would be:

    <table>
  <colgroup>
    <col width="20" />
    <col />
    <col />
  </colgroup>
  <tbody>
    <tr>
      <td colspan="3">January 12th 2011 this here is just for padding to make table wider</td>
    </tr>
    <tr>
      <td> x </td>
      <td>First item</td>
      <td>Second item</td>
    </tr>
  </tbody>
</table>

    Here's a fiddle

    0 讨论(0)
 看不清?
提交回复
热议问题