html - 使用 div 标签的表格

Question

如何使用 div 标签创建表格，使得一行中的列的宽度应基于列 div 中的可用空间。

在下面的代码中，第一行 3 列应采用可用宽度。

<style>
    .tabl {
        width:400px; 
        height:400px;
        border:5px solid blue;
        display:table
    }
    .row {
        height:200px;
        display:table-row; 
        clear:both;
    }
    .cell {
        border:1px solid black;
        display:table-cell
    }
</style>
<div class="tabl">
    <div class="row">
        <div class="cell"> CELL one</div>
        <div class="cell"> CELL two</div>
        <div class="cell"> CELL three</div>
    </div>
    <div class="row">
        <div class="cell"> CELL one</div>
        <div class="cell"> CELL two</div>
        <div class="cell"> CELL three</div>
        <div class="cell"> CELL four</div>
    </div>
</div>

Answer 1

一个解决方案可以是这个，用jquery；

var rows = $('.row').length;
var widthrow = parseInt(100, 10) / parseInt(rows, 10);


$('.row').each(function(i, obj) {

  $(this).outerHeight(widthrow+'%'); 
  var count = $(this).children().length;
  var w = parseInt(100, 10) / parseInt(count, 10);

  $(this).children('div').each(function(i, obj) {

    $(this).outerWidth(w+'%');
  });

});

*{
  box-sizing: border-box;

}
.tabl {
  width: 400px;
  height: 400px;
  border: 5px solid blue;
}
.row {
  height: 200px;
  width: 100%;
  overflow: hidden;
}
.cell {
  border: 1px solid black;
  float: left;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabl">
  <div class="row">
    <div class="cell">CELL one</div>
    <div class="cell">CELL two</div>
    <div class="cell">CELL three</div>
  </div>
  <div class="row">
    <div class="cell">CELL one</div>
    <div class="cell">CELL two</div>
    <div class="cell">CELL three</div>
    <div class="cell">CELL four</div>
  </div>
  
  <div class="row">
    <div class="cell">CELL one</div>
    <div class="cell">CELL two</div>
  </div>
</div>