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

时间：2022-07-19 09:56:26

防止table变形 td固定宽度

具体设置如下代码：

 <!doctype html>

 <html lang="en">

     <head>

         <meta charset="UTF-8" />

         <title>防止table变形 td固定宽度</title>

         <style type="text/css">

             table {

                 /*为表格设置合并边框模型*/

                 border-collapse: collapse;

                 /*列宽由表格宽度和列宽度设定*/

                 table-layout: fixed;

             }

             td {

                 border: 1px solid #ddd;

                 /*允许在单词内换行。*/

                 word-break: break-word;

                 /*设置宽度*/

                 width: 100px;

             }

         </style>

     </head>

     <body>

         <table>

             <tr>

                 <td>DataDataDataDataDataDataDataDataDataDataDataData123</td>

                 <td>Data</td>

                 <td>Data</td>

                 <td>Data</td>

             </tr>

             <tr>

                 <td>Data</td>

                 <td>Data</td>

                 <td>Data</td>

                 <td>Data</td>

             </tr>

         </table>

     </body>

 </html>

相关文章