UC知道HTML表格问题！
来源：百度知道 编辑：UC知道 时间：2024/05/21 17:45:43
郁闷一个下午了，求高人一助！
我写个测试文件如下：
<html>
<head>
<title>测试</title>
</head>
<body>
<table width="50" bgcolor="red">
<tr><td>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</td></tr>
</table>
<table width="50" bgcolor="green">
<tr><td>uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</td></tr>
</table>
<table width="50" bgcolor="blue">
<tr><td>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</td></tr>
</table>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
width="50"很明显很小，但是那些字母还是只显示一整行！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
我又把字母换成一行汉字！如下：
<html>
<head>
<title>测试</title>
</head><
我写个测试文件如下：
<html>
<head>
<title>测试</title>
</head>
<body>
<table width="50" bgcolor="red">
<tr><td>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</td></tr>
</table>
<table width="50" bgcolor="green">
<tr><td>uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu</td></tr>
</table>
<table width="50" bgcolor="blue">
<tr><td>iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii</td></tr>
</table>
</body>
</html>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
width="50"很明显很小，但是那些字母还是只显示一整行！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
我又把字母换成一行汉字！如下：
<html>
<head>
<title>测试</title>
</head><
加入一个table-layout:fixed;word-wrap:break-word;
<table width="50" bgcolor="red" style="table-layout:fixed;word-wrap:break-word;">
建议使用CSS控制！俱体方法如下：
使用 table-layout:fixed;强制table的宽度,多余内容隐藏
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
</td>
</tr>
</table>
使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ; 交果换行
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</table>
加上word-break: break-all即可
&