无法使用CSS colgroup保留表列宽度修复
无法使用CSS colgroup保留表列宽度修复
提问于 2015-10-01 19:16:33
p {
width: 40px;
margin: 0;
padding: 0;
}
td {
padding: 0;
margin: 0;
}<table style="width:100px;">
<colgroup>
<col style="width:20px;">
<col style="width:40px;">
<col style="width:40px;">
</colgroup>
<tr>
<th>ID</th>
<th>NAME</th>
<th>Email</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>
<p>johntheman@example.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
sadddddddddddddddddddddddddd
</p>
</td>
</tr>
</tbody>
</table>
我有一个固定宽度的简单的桌子。我也有固定的宽度在它的列，以做到这一点，我已经使用CSS colgroup。
问题1:
如果我签入开发人员的工具，我的列宽与我在colgroup中给出的列宽不同。
我尝试过的东西
在修复它时，我发现如果我增加了文本td，宽度就会随着文本的变化而变化，反之亦然。
问题2:
当我在td中输入文本时，除非我不通过按enter键在新行上将其换行，否则td的宽度会随着文本的增加而增加。
我尝试过的东西
为了解决这个问题，我将文本包装在一个宽度固定的p标记中，然后将其放入td中，但仍然没有成功。我看到的是宽度应用于P标记，但文本溢出。
我所期望的:
我想知道为什么在td的固定宽度之后，文本没有在新行上自动换行。为什么文本在固定宽度后也会溢出到P？为什么固定宽度后td还要增加？
我不知道我在这里遗漏了什么。
回答 2
Stack Overflow用户
发布于 2015-10-01 19:22:44
对于表，使用css属性
table-layout: fixed;然后为您的td列提供fixed with。
Stack Overflow用户
发布于 2015-10-01 19:54:49
<p>标签和<td>的宽度是固定的，它们不会增加。
在文本内容中没有空格之前，它不会换到下一行。你必须使用省略号来表示...来代替溢出的文本内容。使用下面的css作为你的<p>标签。
p {
width: 40px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32886217
复制相关文章
相似问题
腾讯云开发者
