françois Bonnal françois Bonnal - 3 months ago 7
CSS Question

DIV using display table and display table cell but one column fixed width

I'm essentially trying to do this :
Table with table-layout: fixed; and how to make one column wider

E.G. have an automatically sized column width table where the table is built out of divs not table tds and so on, but where the first column is of fixed width and the rest spread evenly to fill 100%.

Sort of like this :

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

.tit {
width: 90px;
}

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


except as you can see this does not work:

jsFiddle

Thank you for any help you can lend me.

Answer

You could substitute flexbox for CSS tables depending on what browser support you need.

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>