将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

回答

相关问题