将HTML表拆分为多个div

时间:2016-12-05 11:27:35

标签: html css

我遇到了HTML表的问题。我希望我的桌子看起来像报纸的写作风格。

Please Check Image

Desired Home Page sample

如果当前div列中填写了50条记录,我不知道如何跳转到另一个div列。我是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>

0 个答案:

没有答案