文章/答案/技术大牛

发布

社区首页 >问答首页 >浏览器忽略表-布局:固定

问浏览器忽略表-布局:固定
EN

Stack Overflow用户

提问于 2015-02-01 19:23:00

回答 1查看 177关注 0票数 0

我未能实现一个固定的表布局。如果一个表单元格的内容比它所包含的内容多，则表将被重路由，就像表布局被设置为auto一样。这是HTML代码

<!DOCTYPE html>
<html>
  <head>
    <title>Table test</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="<path here>" /> 
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th class="number">Number</th>
          <th class="name">Name</th>
          <th class="type">Type</th>
          <th class="comment">Comment</th>
          <th class="buttons"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>42</td>
          <td>This name is really long and is supposed to be truncated</td>
          <td>Normal</td>
          <td>I don't know what to say</td>
          <td><button>Edit...</button></td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

CSS是

table {
  border-collapse: collapse;
  table-layout: fixed;
}

th {
  font-weight: bold;
  text-align: left;
}

td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

tr {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
}

th.number {
  width: 6rem;
}

th.name {
  width: 15rem;
}

th.type {
  width: 17rem;
}

th.comment {
  width: 15rem;
}

th.buttons {
  width: 17rem;
}

这是一个小提琴。问题是第二列(“名称”)会增加，直到内容合适为止。我做错了什么？

css

html-table

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-01 19:46:53

您需要在width元素上设置table，因为固定表布局的定义是：“表的宽度可以使用‘宽度’属性显式指定。“auto”的值(用于“显示:表”和“显示:内联表”)意味着使用自动表布局算法。但是，如果表是正常流中的块级表(“display: table”)，UA可以(但不必)使用10.3.3算法计算宽度并应用固定的表布局，即使指定的宽度是‘auto’。“(请注意，auto是默认值。)

这很尴尬，但是要获得固定的布局，您需要添加

table { width: calc(40rem + 10px); }

这里，40rem是您为列设置的宽度之和，10px容纳单元格中的默认填充(每个单元格中的1px位于左单元格和右单元格中)。

较旧的浏览器不支持calc结构，但您已经通过使用rem单元来承担风险。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28266782

复制

相似问题

问浏览器忽略表-布局:固定
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浏览器忽略表-布局:固定EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问浏览器忽略表-布局:固定
EN