DIV 使用显示表格和显示表格单元格但一列固定宽度答案

【问题标题】：DIV using display table and display table cell but one column fixed widthDIV 使用显示表格和显示表格单元格但一列固定宽度
【发布时间】：2016-12-19 10:17:43
【问题描述】：

我实际上是在尝试这样做： Table with table-layout: fixed; and how to make one column wider

例如有一个自动调整大小的列宽表格，其中表格是由 div 而不是表格 tds 等构建的，但第一列是固定宽度，其余列均匀分布以填充 100%。

有点像这样：

.intra {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.tit {
    width: 90px;
}

.hover {
    display: table-cell;
    width: auto;
}

除非你可以看到这不起作用：

jsFiddle

感谢您提供的任何帮助。

【问题讨论】：

乍一看你的小提琴，似乎你需要 display: table 在你的 .maketable 班级，display: table-row 在你的 .intra 班级，和 display: table-cell 在你的 .tit 班级?
错字提示：它是一个列——不是“列”..

标签： html css responsive-design

【解决方案1】：

您可以根据您需要的浏览器支持来用 flexbox 替换 CSS 表格。

body {
  background-color: lightblue;
}
/*--------------------------*/

.maketable {
  font-size: 7px;
  width: 90%;
  margin: 20px auto 17px auto !important;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid gray;
}
.intra {
  display: flex;
  line-height: 15px;
}
.intra .hover {
  flex: 1;
  background: pink;
  text-align: center;
}
.tit {
  background-color: rgba(63, 191, 76, 0.25);
  flex: 0 0 90px;
  text-align: left;
}
.

<div class="maketable">
  <div class="intra">
    <div class="tit">Intranet</div>
    <div class="hover" id="01">29.90€</div>
    <div class="hover borl" id="02">59.90€</div>
    <div class="hover borl" id="03">409.90€</div>
    <div class="hover borl" id="04">2009.90€</div>
  </div>
  <div class="intra caisse">
    <div class="tit bort">Pack Intranet+Caisse</div>
    <div class="hover bort" id="05">29.90€</div>
    <div class="hover bortl" id="06">29.90€</div>
    <div class="hover bortl" id="07">29.90€</div>
    <div class="hover bortl" id="08">29.90€</div>
  </div>
  <div class="intra web">
    <div class="tit bort">Pack Intranet+Web</div>
    <div class="hover bort" id="09">29.90€</div>
    <div class="hover bortl" id="10">29.90€</div>
    <div class="hover bortl" id="11">29.90€</div>
    <div class="hover bortl" id="12">29.90€</div>
  </div>

  <div class="intra caisse web">
    <div class="tit bort">Pack Intranet+Caisse+Web</div>
    <div class="hover bort" id="13">29.90€</div>
    <div class="hover bortl" id="14">29.90€</div>
    <div class="hover bortl" id="15">29.90€</div>
    <div class="hover bortl" id="16">29.90€</div>
  </div>
</div>

【讨论】：

谢谢你，这正是我想要的。我确实有一个后续问题，它有点无关我希望回答这个问题不需要一个全新的线程：我目前正在通过类做内部边界，因为你可以看到我无法让边界崩溃工作.有没有更简单的方法或者边界折叠真的可以工作？
No...border-collapse 在表格或（我认为）CSS 表格上工作

【解决方案2】：

如果你可以使用 css flexbox它可以很容易地实现你想要的：

html, body {
  margin: 0;
  padding:0;
}

.container {
  width: 100%;
  display: flex;
}

.column {
  background-color: #f9f9f9;
  padding: 10px 15px;
  border: 1px solid grey;
  flex: 1;
}

.column.left {
  background-color: grey;
  color: white;
  width: 90px;
  max-width: 90px;
  flex: 0 0 90px;
}

<div class="container">
  <div class="column left">
    Fixed 90px
  </div>
  <div class="column">
    Column
  </div>
  <div class="column">
    This is the longest column
  </div>
  <div class="column">
    Longer Column
  </div>
</div>

您的代码太杂乱了，以至于我从头开始编写了一个新代码，但是您应该能够根据自己的需要轻松实现它。在上面的 sn-p 中，第一列的宽度是固定的，其余列的宽度是相等的。

Flexbox 浏览器支持：http://caniuse.com/#search=flexbox

这也是一个可以玩弄的小提琴：https://jsfiddle.net/thepio/22mouw62/

【讨论】：