使用div标签的表格

如何使用div标签创建表格，以便行中的列应根据列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>

来源

2015-10-18 Abhiram Reddy

那不是如何表的工作原理。在每一列中，所有单元具有相同的宽度。制作两个表格，或者完全放弃表格并使用内嵌块。 –

为什么使用css-way创建表格？为什么不使用表格，因为这是你想要完成的？ – Terradon

只需使用一个表格并使用CSS来设置它的样式，我想可以使用CSS中的％值使列占表格宽度的百分比。虽然我个人从未真正使用表格。 – tom

你有没有想过使用Bootstrap？它使用12列网格系统？我今天不鼓励在网页设计中使用表格。你可以在bootstrap网站上找到你需要知道的一切。 http://getbootstrap.com

来源

2015-10-18 18:10:04 RiaanV

连续的列是动态的。因此，根据行中没有列添加bootstrap（12列网格系统）类是不可能的，因为我们可能会得到'n'列没有列。 –

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

来源

2015-10-18 18:48:56

使用div标签的表格

回答

相关问题