CSS 'display: table-column' does not work properly

[Krispy]

does anyone can explain such a problem, please?At the Mozilla Developer Network \[code\]display: table-column\[/code\] CSS rule is described as: These elements behave like the corresponding \[code\]<col>\[/code\] HTML elements.I never widely used CSS tables until now due to the fact that they are not supported in older versions of IE, but today I found that even for modern browsers CSS tables can not be considered as real substitutions for HTML ones.\[code\]<style> .css_table { display: table; border: 1px solid black; padding: 10px; } .col { display: table-column; width: 20px; } .table_row { display: table-row; } input { width: 100%; display: table-cell; } table { border: 1px solid black; padding: 10px; } col { width: 20px; }</style><div class="css_table"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="table_row"> <input> <input> <input> </div> <div class="table_row"> <input> <input style="width:50px;"> <input> </div> <div class="table_row"> <input> <input> <input> </div> </div><table><col><col><col><tr> <td><input></td> <td><input></td> <td><input></td></tr><tr> <td><input></td> <td><input style="width:50px;"></td> <td><input></td></tr><tr> <td><input></td> <td><input></td> <td><input></td></tr></table>\[/code\]Here is a Fiddle. As you can see, my intention is to create a "matrix" 3x3 and I want to use tables so that columns will automatically adjust their width if some elements exceed width of a cell.But in the case of CSS approach \[code\]table-column\[/code\] property does not work as expected. Despite the fact that I have three cells in a row, all cells are placed in the first column.So the question is: whether I did something wrong or CSS rule implementation is buggy? Cause it is obvious that CSS "columns" do not behave like real HTML \[code\]<col>\[/code\]s.Thanks.