CSSテーブルセルdivの幅を同じにする方法はありますか？

Question

今、私はCSSにdisplay: table-cellと書かれた一連の列を持っています。各列の文字数はmin-widthで280px、max-widthで360pxです。唯一の問題は、これらの列のサイズを同じにしたいということです。つまり、それぞれの列が最も広い列と同じ幅になるようにします。私はおそらくこれを行うことができるいくつかのJavaScriptを書くことができます。 CSSを使ってこれを行う方法はありますか？

フレックスボックスを使うこともできます。

Answer 1

期待どおりですか？

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