-1

Right now, I have a set of columns that are styled as display: table-cell in CSS. Each column has a min-width of 280px and a max-width of 360px. The only issue is that I want these columns to be equally-sized. That is, I want the columns to each be as wide as the widest column. I could probably write some javascript that could do this. Is there a way to do this with just CSS though?

I could maybe also use flexbox if that would be any better.

Jason Baker
  • 192,085
  • 135
  • 376
  • 510
  • is this: https://css-tricks.com/fluid-width-equal-height-columns/ what you want? – Aschab Oct 05 '16 at 16:39
  • Well, except that's fluid width, equal height. I want fluid height, equal width. – Jason Baker Oct 05 '16 at 16:42
  • I would advise using [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) – Redu Oct 05 '16 at 16:45
  • You must have been around long enough to know how to [ask a good question](http://stackoverflow.com/help/how-to-ask) – Asons Oct 05 '16 at 18:18
  • http://stackoverflow.com/questions/31159732/every-item-to-have-the-same-width-as-the-widest-element I think this will answer your question and give you some code too. – Neo Oct 05 '16 at 16:42

1 Answers1

2

Is this works as you expected ?

.table {
  display: flex;
  flex-direction: row;
}

.column {
  min-width: 280px;
  max-width: 360px;
  flex: 1;
}
<div class="table">
  <div class="column">
    <div class="cell">bla bla bla</div>
    <div class="cell">bla bla blabla bla bla</div>
    <div class="cell">bla bla bla</div>
  </div>
  <div class="column">
    <div class="cell">bla bla bla</div>
    <div class="cell">bla bla blabla bla bla</div>
    <div class="cell">bla bla bla</div>
  </div>
  <div class="column">
    <div class="cell">bla bla blabla bla blabla bla bla</div>
    <div class="cell">bla bla bla</div>
    <div class="cell">bla bla bla</div>
  </div>
</div>
Steeve Pitis
  • 4,283
  • 1
  • 21
  • 24
  • 1
    While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – andreas Oct 10 '16 at 08:55