在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
下面示例中,当姓名所在td的宽度是60px,如果第二行里的文字较少时,显示正常,如果第二行里的文字较多时,则显示不正常了 复制代码 代码如下:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>极客世界</title> <style type="text/css"> .mTable{width:200px;border:1px solid #666;border-collapse:collapse} .mTable td{border:1px solid #666} </style> </head> <body> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介个人简介个人简介</td> </tr> </table> </body> </html> 解决方法一:(对第二列td也设置宽度) 复制代码 代码如下:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>极客世界</title> <style type="text/css"> .mTable{width:200px;border:1px solid #666;border-collapse:collapse} .mTable td{border:1px solid #666} </style> </head> <body> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">姓名:</td> <td width="140">某某</td> </tr> <tr> <td colspan="2">个人简介</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">姓名:</td> <td width="140">某某</td> </tr> <tr> <td colspan="2">个人简介个人简介个人简介</td> </tr> </table> </body> </html> 解决方法二:(设置table-layout:fixed) 复制代码 代码如下:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>极客世界</title> <style type="text/css"> .mTable{width:200px;border:1px solid #666;border-collapse:collapse;table-layout:fixed} .mTable td{border:1px solid #666} </style> </head> <body> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0" class="mTable"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介个人简介个人简介</td> </tr> </table> </body> </html> |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论