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

您是否考虑过使用Bootstrap？它利用12列网格系统？我今天不鼓励在Web Design中使用表格。您可以在bootstrap网站上找到您需要了解的所有信息。 http://getbootstrap.com

Answer 2

解决方案可以是这个，使用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>

使用div标签的表

2 个答案: