防止table变形 td固定宽度
具体设置如下代码:
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>防止table变形 td固定宽度</title> 7 <style type="text/css"> 8 table { 9 /*为表格设置合并边框模型*/ 10 border-collapse: collapse; 11 /*列宽由表格宽度和列宽度设定*/ 12 table-layout: fixed; 13 } 14 15 td { 16 border: 1px solid #ddd; 17 /*允许在单词内换行。*/ 18 word-break: break-word; 19 /*设置宽度*/ 20 width: 100px; 21 } 22 </style> 23 </head> 24 25 <body> 26 <table> 27 <tr> 28 <td>DataDataDataDataDataDataDataDataDataDataDataData123</td> 29 <td>Data</td> 30 <td>Data</td> 31 <td>Data</td> 32 </tr> 33 <tr> 34 <td>Data</td> 35 <td>Data</td> 36 <td>Data</td> 37 <td>Data</td> 38 </tr> 39 </table> 40 </body> 41 42 </html>