CSS uses style table-layout:fixed after the cell width setting is resolved

Source: Internet
Author: User
The following code, after using table-layout:fixed, intended to keep the width of the cell in effect, test in IE, the width setting is invalid:

<table style= "table-layout:fixed;width:200px" border= "1" cellspacing= "1" cellpadding= "1" >  <tr>    <td style= "width:100px" >1</td>    <td colspan= "2" >2</td>  </tr>  < tr>    <td>1.1</td>    <td style= "width:80px" >2.1</td>    <td style= "width:20px ">2.2</td>  </tr></table>

Here is the workaround, after the table-layout:fixed style is used, except for the first row, the width of the cell in the remaining row is set according to the cell width in the first row, so we set a hidden line to specify the width:

<table style= "table-layout:fixed;width:200px" border= "1" cellspacing= "1" cellpadding= "1" ><tr style= " Display:none ">  <td style=" width:100px "></td>  <td style=" width:80px "></td>  <td style= "width:20px" ></td></tr><tr>  <td>1</td>  <td colspan = "2" >2</td></tr><tr>  <td>1.1</td>  <td>2.1</td>  <td >2.2</td></tr></table>

This method can be displayed correctly in Ie6,ie7,ie8, but it doesn't work in non-ie. Here's another way to do this:

<style>td{border:1px solid Red;} </style><table style= "table-layout:fixed;width:200px" border= "0" cellspacing= "1" cellpadding= "1" >< TR style= "height:0;" > <th style= "width:100px" ></th> <th style= "width:80px" ></th> <th style= "width:20px" ></th></tr><tr> <td>1</td> <td colspan= "2" >2</td></tr><tr > <td>1.1</td> <td>2.1</td> <td>2.2</td></tr></table> 
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.