使用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標籤的表格

回答

相關問題