使用div创建与表相同的东西 [英] creating the same thing with divs as tables
本文介绍了使用div创建与表相同的东西的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我开始深入研究CSS,并决定将网站的html主要由表格转换为div。
I started looking into CSS more deeply and decided I would like to convert my site's html that mainly consists of tables to divs.
我想要完成与此测试页上的表格一样的div。但我遇到了一些问题:
I'm trying to accomplish the same thing with divs as with tables on this test page. But I'm having a few problems:
- 无法创建列
我到达的距离:
How far I've gotten:
代码:
<style type="text/css">
body {
background-color:#000;
}
/* TABLE CSS */
td {
font-family: Tahoma;
font-size: 12px;
}
.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
margin-left:auto;
margin-right:auto;
background-color: #000000;
padding: 1px;
width:400px;
}
.topic {
background-color:#3C0;
font-weight: bold;
height: 23px;
color:#FFF;
text-align:center;
}
.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
height:12px;
line-height:21px;
padding:0px;
}
.row:Hover {
background-color: #252525;
}
/* DIV CSS */
div.line {
border-collapse:separate;
border:1px solid #222222;
border-spacing:1px 1px;
align:center;
background-color: #000000;
padding: 1px;
width:400px;
}
div.topic {
background-color:#3C0;
font-family: Tahoma;
font-size: 12px;
height: 23px;
font-color:#FFF;
text-align:center;
}
div.row {
background-color: #111111;
border-bottom: 1px solid black;
color: #ffffff;
padding:6px;
font-family: Tahoma;
font-size:12px;
}
div.row:Hover {
background-color: #252525;
}
</style>
<body>
<table class="line">
<tbody>
<tr>
<td class="topic" colspan="3">Table</td>
</tr>
<tr class="row">
<td width="20%" align="left">Test</td>
<td width="20%" align="center">1</td>
</tr>
<tr class="row">
<td align="left">Test</td>
<td align="center">2</td>
</tr>
</tbody>
</table>
<p>
<div class="line">
<div class="topic">Div</div>
<div class="row">Test</div><div class="row">1</div>
<div class="row">Test</div><div class="row">2</div>
</div>
</p>
推荐答案
到此为止:
HTML:
<div id="wrap">
<h2> Div </h2>
<div class="section">
<div> Test </div>
<div> 1 </div>
</div>
<div class="section">
<div> Test </div>
<div> 2 </div>
</div>
</div>
CSS:
#wrap {
border: 2px solid #333;
padding: 2px;
}
h2 {
background: green;
color: white;
text-align: center;
font-weight: bold;
padding: 4px 0;
}
.section {
overflow: auto;
margin-top: 2px;
}
.section > div {
float:left;
width: 50%;
box-sizing: border-box;
-moz-box-sizing: border-box;
background-color: #333;
color: white;
padding: 4px 0;
}
.section > div + div {
text-align: center;
border-left: 2px solid black;
}
在线演示: http://jsfiddle.net/jNQrM/1/
这篇关于使用div创建与表相同的东西的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文