table布局防止table变形 td固定宽度

防止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>

table布局 防止table变形 td固定宽度

table布局防止table变形 td固定宽度