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

最新推荐文章于 2024-03-19 10:21:07 发布

南京闫伟亮的野爹

最新推荐文章于 2024-03-19 10:21:07 发布

阅读量467

点赞数

分类专栏：前端文章标签： table变形 td固定宽度

原文链接：https://www.mk2048.com/blog/blog.php?id=icjh1ha1j&title=table%E5%B8%83%E5%B1%80+%E9%98%B2%E6%AD%A2table%E5%8F%98%E5%BD%A2+td%E5%9B%BA%E5%AE%9A%E5%AE%BD%E5%BA%A6

版权

前端专栏收录该内容

368 篇文章 3 订阅

订阅专栏

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