通过在CSS中使用`white-space: nowrap;`属性，可以避免表格中的文字换行，当内容过长时会自动拓宽表格宽度。此外，结合`display: inline;`属性，可以使多个input元素在同一行内水平排列，简化HTML代码并优化布局。
为了让表格里文字不换行（预计也不会太长的字符串），可以给表格里td添加一个nowrap属性，如 <td nowrap>文字内容</td> 这样。
但是如果给每个td都加上nowrap属性，貌似太繁琐并且占用空间和流量。于是乎，我找css的实现方法，不擅长此术，尝试了n多个样式后，找到white-space: nowrap; 貌似跟直接给td加nowrap差不多，那么就可以像下面这样定义样式，即可实现td里不换行，字符串长了就撑宽表格宽度。
例子1：
<html>
<head>
<style type="text/css">
td
{
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>
测试数据1
</td>
<td>
测试数据2
</td>
<td>
测试数据3
</td>
</tr>
<tr>
<td>
测试数据4
</td>
<td>
测试数据5
</td>
<td>
测试数据6
</td>
</tr>
</table>
</body>
</html>
我的案例：
td - white-space: nowrap; 属性
input - display:inline； 属性
<html>
<head>
<style type="text/css">
td
{
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td >
<input type='text' name='ss' value='11' style=' display:inline;'/>
<input type='text' name='tt1' value='22' style=' display:inline;'/>
</td>
<td>
<input type='text' name='tt2' value='33' style=' display:inline;'/>
<input type='text' name='tt3' value='44' style=' display:inline;'/>
</td>
</tr>
<tr>
<td >
<input type='text' name='tt4' value='rr' style=' display:inline;'/>
</td>
<td>
<input type='text' name='tt5' value='cc' style=' display:inline;' />
</td>
<td>
<input type='text' name='tt6' value='vv' style=' display:inline;' />
</td>
</tr>
</table>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
