首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法使用CSS colgroup保留表列宽度修复

无法使用CSS colgroup保留表列宽度修复
EN

Stack Overflow用户
提问于 2015-10-01 19:16:33
回答 2查看 828关注 0票数 0

代码语言:javascript
复制
p {
  width: 40px;
  margin: 0;
  padding: 0;
}
td {
  padding: 0;
  margin: 0;
}
代码语言:javascript
复制
<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还要增加?

我不知道我在这里遗漏了什么。

EN

回答 2

Stack Overflow用户

发布于 2015-10-01 19:22:44

对于表,使用css属性

代码语言:javascript
复制
table-layout: fixed;

然后为您的td列提供fixed with。

票数 1
EN

Stack Overflow用户

发布于 2015-10-01 19:54:49

<p>标签和<td>的宽度是固定的,它们不会增加。

在文本内容中没有空格之前,它不会换到下一行。你必须使用省略号来表示...来代替溢出的文本内容。使用下面的css作为你的<p>标签。

代码语言:javascript
复制
p {
    width: 40px;
    margin: 0;
    padding: 0;
    text-overflow: ellipsis;
    overflow: hidden;       
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/32886217

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档