françois Bonnal françois Bonnal - 1 year ago 68
CSS Question

DIV using display table and display table cell but one collum 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 collum width table where the table is built out of divs not table tds and so on, but where the first collumn 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:


Thank you for any help you can lend me.

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download