高级css/html表格样式
我正在尝试使用css/html来实现类似于此的表格。可能吗 ?高级css/html表格样式
所以白色区域为places
表。这是表的HTML:
<table class="places">
<tr>
<td class="solid">K</td>
<td> </td>
<td> </td>
<td class="solid">P</td>
<td> </td>
</tr>
<tr>
<td class="solid">25</td>
<td class="solid">26</td>
<td> </td>
<td class="solid">47</td>
<td class="solid">48</td>
</tr>
(...)
</table>
而且我的CSS:
.places{
position:relative;
background:white;
width:160px;
margin:0 auto;
text-align:left;
padding:5px;
border-collapse: collapse;
}
.places tr {
}
.places td {
width:22px;
height:22px;
text-align:center;
}
.solid {
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
}
我敢肯定的是,虽然表比其他HTML对象有点不同,填充应该在这里工作。但看起来我错了。 Cellspacing/cellpading无效。目前,我能得到的东西看起来像这样:
您需要border-spacing
属性。
表细胞不像其他的元素,因为在div
和p
得到的块级元素,并span
和input
是内联,表格单元格和行获得自己table-cell
和table-row
显示值。
使用border-spacing
与border-collapse: separate
会给你你需要的东西。看看:http://jsfiddle.net/kjag3/1/
PS。我也将清理HTML的*分为两个表格,因此您不需要填充空单元格。
当然哑巴即不能处理这个。哦,也许下一代将:)感谢 – 2010-08-29 01:29:53
勘误。找到了解决方法。 – 2010-08-29 01:36:15
不能设置单元格之间的任何距离的原因是,你必须border-collapse
设置为collapse
在样式您table
。如果使用border-collapse:separate
代替,则应该可以为表格单元格添加页边空白并在它们之间放置空格。
使用border-collapse:collapse
使相邻表格单元格使用相同的边框;自然,当两个元素相互连接时,您将无法在两个元素之间放置空间。
我想知道表格结构是否适合您要实现的目标?
对我来说,'K'和'P'是标题,'K'和'P'之间的差距表明'K'和'P'是分开的,不应该是同一张桌子的一部分。所以我建议摆脱表和重组自己的HTML中使用简单的标题和div
标签是这样的:
HTML:
<div class="places">
<h2>K</h2>
<div>25</div>
<div>26</div>
<div>23</div>
<div>24</div>
<div>21</div>
<div>22</div>
</div>
<div class="places">
<h2>P</h2>
<div>47</div>
<div>48</div>
<div>45</div>
<div>46</div>
<div>43</div>
<div>44</div>
</div>
CSS:
.places {
width: 55px;
float: left;
margin: 0 25px 0 0;
}
.places h2, .places div {
width: 22px;
height: 22px;
margin: 0 3px 3px 0;
border: 1px solid #d2cdd1;
border-top:none;
background-color:#e7e7e7;
text-align:center;
cursor:pointer;
font-weight: normal;
font-size: 12pt;
}
.places div {
float: left;
}
如果你真的想挑剔,那么'div'应该可能是一个无序列表。 – derekerdmann 2010-08-29 02:04:14
我应该忘记关于桌子,并与无序ilsts做? – 2010-08-29 01:12:26
您应该考虑如果您的列表是erm ...列表,而不是表格数据。我们现在还不能确切地说... – 2010-08-29 01:18:24