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

Question

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 1

If you can use css flexboxit can be easy to achieve what you want like this:

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>

Your code was so cluttered that I made a new one from scratch but you should be able to implement this easily to your needs. In the snippet above the first column is fixed width and the rest of the columns are equal in width.

Flexbox browser support: http://caniuse.com/#search=flexbox

Here's also a fiddle to play around with: https://jsfiddle.net/thepio/22mouw62/

Answer 2

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>