Application scenario one:
When there is a long English text in the table, if table-layout:fixed or is not set word-break:break-all, then the width displayed by the cell 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="400" 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>
In the above code, add table- to the table element layout: fixed; or add word-break: break-all to td, you can achieve the width display we set when installing the table:
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:
General writing method of ellipsis in css:
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
When you want to apply ellipsis in table:
<p style="margin-bottom: 7px;"><style><br/> *{padding:0;margin:0;font-size: 12px;color: #333}<br/> li{<a href="http://www.php.cn/wiki/953.html" target="_blank">list-style</a>: none;}<br/><br/> table{border:2px solid #ccc;width: 100%;text-align: center;border-collapse:collapse;}<br/> td,th{height: 30px;border:2px solid #ccc;word-break: break-all;}<br/><br/> .ellipsis{white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}<br/></style><br/><br/><table width="400" border="1" id="table1"><br/> <tr><br/> <td>3</td><br/> <td class="ellipsis" width="10%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td><br/> <td width="40%">5</td><br/> </tr><br/> <tr><br/> <td>3</td><br/> <td>4</td><br/> <td>5</td><br/> </tr><br/></table><br/></p>
The result is not what we want at all:
Solution: 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="400" 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 codes are all compatible with ie6+
The above is the detailed content of Detailed explanation of the application of table-layout:fixed in css. For more information, please follow other related articles on the PHP Chinese website!