Tạo table nhân tạo, giải quyết khó khăn về width

**mad** · 23.07.2016 / 18:25

Theo các bạn đã biết thì table luôn thay đổi về width của các thẻ td.

Hôm nay mã code sau sẻ đóng vai trò giống table!

HTML5

<style>
.mtable{width:auto}
.mtr{display:flex}
.mtd{width:0}
.wt1{flex:5}
.wt2{flex:55}
.wt3{flex:40}
</style>
 
<div class="mtable">
<div class="mtr">
<div class="mtd wt1">STT</div><div class="mtd wt2">NAME</div><div class="mtd wt3">SIZE</div>
</div>
 
<div class="mtr">
<div class="mtd wt1">1</div><div class="mtd wt2">RAME</div><div class="mtd wt3">10TB</div>
</div>
</div>

vậy là chúng ta đã có 1 table

lưu ý các div.mtd có thể thêm nhiều hoặc giảm đi.

Thêm các class .wt(n) để cố định width cho các div.mtd bằng cách thay đổi chỉ số flex

**ga_bong** · 23.07.2016 / 19:39

:9::9::9: