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

Question

我实际上是在尝试这样做: 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

谢谢你能给我的任何帮助。

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