Anwendungsszenario eins:
Wenn die Tabelle einen langen englischen Text enthält und keine Einstellung für table-layout:fixed vorliegt oder word-break:break-all, dann ist die Breite der Zellenanzeige nicht die Breite, die wir wie folgt festgelegt haben:
<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>
Fügen Sie dem Tabellenelement im obigen Code table-layout: Fixed; hinzu oder fügen Sie word-break: break-all zu td hinzu, um die von uns für die Tabelleninstallation festgelegte Breitenanzeige zu erreichen:
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;}
Anwendungsszenario zwei:
Allgemeine Schreibmethode für Ellipsen in CSS:
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Wenn Sie Ellipsen in einer Tabelle anwenden möchten:
<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>
Das Ergebnis ist überhaupt nicht das, was wir wollen:
Lösung: Tabelle hinzufügen – Layout: behoben;
<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>
Der Effekt ist genau das, was wir wollen:
Der obige Code ist mit ie6+ kompatibel
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Anwendung von table-layout:fixed in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!