表格： a b c d e 1 222222222222222222222222222 3333333333333 44444444444 55555555555555555555555555555555555555 tbody里数据是在ajax成功回调里拼接字符串上去的，因为b的内容长度比较长，所以单元格占得宽度比较长。我给th或者是td加宽度都不起作用，有没有大佬知道怎么才能让宽度起作用的，我希望单元格里边的内容超出能换行……

拼接字符串拼成的table，单元格宽度无法控制

发布于
2018-09-14

表格：

a	b	c	d	e
1	222222222222222222222222222	3333333333333	44444444444	55555555555555555555555555555555555555

tbody里数据是在ajax成功回调里拼接字符串上去的，因为b的内容长度比较长，所以单元格占得宽度比较长。

我给th或者是td加宽度都不起作用，
有没有大佬知道怎么才能让宽度起作用的，我希望单元格里边的内容超出能换行……

css css3 html

html5 javascript

阅读 2.7k

2 个回答

Redux

✓ 已被采纳

你好朋友，我写了个demo，希望对你有帮助！主要利用了 table-layout:fixed; 和 word-break: break-all;，有说的不清楚的欢迎交流！

图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table{
            table-layout:fixed;
            width: 300px;
            border: 1px solid pink;
        }
        td{
            border: 1px solid pink;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td>11111111111111</td>
            <td>22222222222222222222222</td>
            <td>33333333</td>
        </tr>
        <tr>
            <td>11111111111111</td>
            <td>22222222222222222222222</td>
            <td>33333333</td>
        </tr>
        <tr>
            <td>11111111111111</td>
            <td>22222222222222222222222</td>
            <td>33333333</td>
        </tr>
    </table>
</body>
</html>