CSS Div with children behaving like table, making one child to fill width

Question

so I have a <div> with display:table; and it has like 10 children (the count may vary, the children may be buttons or inputs) with display:table-cell; and I have set the width of all children except for one. I want the last one children without fixed width to fill the width.

For example, let's say that the parent <div> has width of 600px, there are 4 buttons, each with width of 40px, I want to fifth element to have a width of 440px without setting it staticaly.

This is what I have done so far:

HTML:

<div class="table">
    <button class="show"></button>
    <div class="id">TEXT</div>
    <div class="username">TEXT</div>
    <div class="dob">TEXT</div>
    <button class="edit"></button>
    <button class="delete"></button>
</div>

And the CSS: div

.table {
    display:table;
    width:100%;
    height:40px;
}
div.table > * {
    display:table-cell;
    height:40px;
    line-height:40px;
}
div.table > button {width:64px;}
div.table > div.id {width:48px;}
div.table > div.dob {width:128px;}

//EDIT: The element I want to fill the space is div.username

Generally, form elements like `button` doesn't like to be displayed as anything else than what they were meant to, so if you wrap them in e.g. a `span`, it will work as is: https://jsfiddle.net/e3j42ok7/ — Asons, Dec 15 '17 at 06:57

score 2 · Accepted Answer · edited Dec 16 '17 at 10:27

2

you can do that easily with flexbox

section {
  display: flex;
  max-width: 600px
}

div {
  flex: 0 40px;
  border: 1px solid red
}

div:last-of-type {
  flex: 1
}

<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</section>

edited Dec 16 '17 at 10:27

VXp

11,598
6
31
46

answered Dec 10 '17 at 09:29

dippas

58,591
15
114
126

CSS Div with children behaving like table, making one child to fill width

1 Answers1