將HTML表拆分爲多個div

我遇到HTML表的問題。我希望我的桌子以報紙的寫作風格出現。將HTML表拆分爲多個div

我不知道如何跳到另一個格列，如果50個記錄是在當前格欄填寫。我是HTML新手。感謝您閱讀我的問題。

當前HTML：

<html> 
<head> 
<style> 
#quotescointainer{ 
width: 100%; 
font-size: 4px; 
overflow: hidden; /* contain floated elements */ 
background: #fff 
} 
#quotesleft { 
float: left; 
width: 10%; 
background-color: #fff; 
} 
#quotescenter { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter2 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter3 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter4 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter5 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter6 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter7 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotescenter8 { 
float: left; 
background-color: #fff; 
width: 10%; 
} 
#quotesright{ 
float: left; 
width: 10%; 
background-color: #fff; 
}  
</style> 
<style> 
table { 
font-family: arial, sans-serif; 
border-collapse: collapse; 
width: 100%; 
font-size:0.7vw; 
} 

td, th { 
border: 1px solid #000000; 
text-align: left; 
padding: 1px; 
} 

tr:nth-child(even) { 
background-color: #dddddd; 
} 
</style> 

    </head> 
<body> 
<div id="quotescointainer"> 
<div id="quotesleft"> 
    <?php echo file_get_contents("http://example.com/table?id=5452") ;?> 
</div> 
</div> 
</body> 
</html>

來源

2016-12-05 ooo hhh

我無法理解你想要什麼。「我想讓我的桌子出現爲報紙的寫作風格」 – SaidbakR

我在主頁中有10個div列，想要填充每個50行的數據。請檢查圖像清除更多。謝謝。 –

主頁面出現500個串行數據。所以我需要在10格中填充50行。但是如果之後有50行，我不知道如何跳到另一個div。 –

你的問題更簡單的解決將是使用數據表插件。而且，它更清晰。

你可以只添加這樣的事情，你當然喜好：

$(document).ready(function(){ 
    $('#myTable').DataTable(); 
});

See link

來源

2016-12-05 12:29:53

將HTML表拆分爲多個div

回答

相關問題