A detailed description of the application of table-layout:fixed in CSS

Application Scenario One:

When the table has a long English, if not set table-layout:fixed or Word-break:break-all, then the width of the cell display is not the width we set, as follows:

<style>    table{border:2px solid #ccc; width:100%;text-align:center;border-collapse:collapse;/* table-layout:fixed;*/}    td,th{height:30px;border:2px solid #ccc;/*word-break:break-all;*/}</style>< Table Width= "border=" 1 "id=" table1 ">   <tr>       <td>3</td> <td width=      " 10% "> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>      <td width= "20%" > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>   </tr>   <tr>       <td> 3</td>       <td>4</td>       <td>5</td>   </tr></table>

The above code adds table-layout:fixed to the table element; Or add Word-break:break-all to TD, you can reach the table installation we set the width of the display:

table{border:2px solid #ccc; width:100%;text-align:center;border-collapse:collapse;table-layout:fixed;} td,th{height:30px;border:2px solid #ccc;/*word-break:break-all;*/}

table{border:2px solid #ccc; width:100%;text-align:center;border-collapse:collapse;/*table-layout:fixed;*/}td,th{ height:30px;border:2px solid #ccc; word-break:break-all;}

Application Scenario Two:

The general wording of the ellipsis for CSS:

White-space:nowrap; Overflow:hidden; Text-overflow:ellipsis;

When you want to apply an ellipsis to a table:

<style>
    *{padding:0;margin:0;font-size:12px;color: #333}
    Li{list-style:none;}

    table{border:2px solid #ccc; width:100%;text-align:center;border-collapse:collapse;}
    td,th{height:30px;border:2px solid #ccc; word-break:break-all;}

    . ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
</style>

<table width= "border=" 1 "id=" table1 ">
        <tr>
            <td>3</td>
            <TD class= "ellipsis" width= "10%" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa< /TD>
            <TD width= "40%" >5</td>
        </tr>
        <tr>
            <td>3</td>
            <td>4</td>
            <td>5</td>
        </tr>
</table>

The result is not exactly what we want:

Workaround: Add table-layout:fixed;

<style>    *{padding:0;margin:0;font-size:12px;color: #333}    li{list-style:none;}    table{border:2px solid #ccc; width:100%;text-align:center;border-collapse:collapse;table-layout:fixed;}    td,th{height:30px;border:2px solid #ccc; word-break:break-all;}    . Ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} </style><table width= "border=" 1 "id=" table1 ">        <tr>            <td>3</td>            < TD class= "Ellipsis" width= "10%" >aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td >            <td width= "40%" >5</td>        </tr>        <tr>            <td>3</td>            <td>4</td>            <td>5</td>        </tr></table>

The effect is exactly what we want:

The above code is compatible ie6+