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

Question

我基本上是想这样做： Table with table-layout: fixed; and how to make one column wider

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

有点像这样：

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

.tit {
    width: 90px;
}

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

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

jsFiddle

感谢您提供借助我的任何帮助。

Answer 1

如果您可以使用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>

您的代码非常混乱，我从头开始创建一个新代码但您应该能够轻松地实现这一点以满足您的需求。在上面的代码段中，第一列是固定宽度，其余列的宽度相等。

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

这里也是一个小提琴：https://jsfiddle.net/thepio/22mouw62/

Answer 2

您可以将flexbox替换为CSS表，具体取决于您需要的浏览器支持。

＆＃13;

＆＃13;

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;
}
.

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;