Question

我正在使用scss构建一个div-list作为表。我把它转换成了示范的CSS 第一列和最后一列用90px和30px固定包围的链接是表格行

| 90px | fluid sdfsdfsdfsdfd sd ... | 30px |
| 90px |流体asdasdasd（空白）| 30px |

表格宽度应为100％。流体部分的宽度应自动100％ - 30px - 90px

我的计划是根据没有

的固定宽度自动获得流体宽度

width: calc(100% - 30px - 90px)

表格的拉伸不应超过100％，流体容器的内容应该得到漂亮的省略号标签。

我的样式表中有错误吗？

div.menu {
  display: table;
  border-collapse: collapse;
  width: 100%;
}
div.menu .head {
  display: table-row;
  height: 34px;
  line-height: 34px;
}
div.menu .head div {
  padding: 0 5px;
  display: table-cell;
}
div.menu .head div:first-of-type {
  width: 90px;
}
div.menu .head div:last-of-type {
  width: 30px;
}
div.menu a {
  height: 60px;
  line-height: 60px;
  display: table-row;
  border-top: 1px solid #f2f2f2;
  text-decoration: none !important;
}
div.menu a div {
  display: table-cell;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
div.menu a div:first-of-type {
  width: 90px;
}
div.menu a div:last-of-type {
  width: 30px;
}
div.menu a:last-of-type {
  border-bottom: 1px solid #f2f2f2;
}

<div class="menu">
  <div class="head">
    <div>Text</div>
    <div>Name</div>
    <div></div>
  </div>
  <a href="#">
    <div>Info</div>
    <div>Name of the item</div>
    <div>icon</div>
  </a>
  <a href="#">
    <div>Info</div>
    <div>Name of another item</div>
    <div>icon</div>
  </a>
  <a href="#">
    <div>Info</div>
    <div>This is a very long name, and it should not be greater than the page, and i want to see the icon. But it's not working.</div>
    <div>icon</div>
  </a>
</div>

Answer 1

使用table-layout: fixed;解决了我的问题。

div.menu {
  display: table;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

JSFiddle示例：https://jsfiddle.net/jennifergoncalves/1tv3ygka/

table-layout文档：https://www.w3schools.com/cssref/pr_tab_table-layout.asp

SCSS：固定和流动的表格单元

1 个答案: