标题 | td单元格合并时 td宽度问题 |
内容 | 在对td单元格进行合并后,发现td显示的宽度与设置的宽度明显有差异(ie下) 下面示例中,当姓名所在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"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0"> <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"> <tr> <td width="60">姓名:</td> <td width="140">某某</td> </tr> <tr> <td colspan="2">个人简介</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0"> <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"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介</td> </tr> </table> <table width="200" cellspacing="0" cellpadding="0"> <tr> <td width="60">姓名:</td> <td>某某</td> </tr> <tr> <td colspan="2">个人简介个人简介个人简介</td> </tr> </table> </body> </html> |
随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。