我有这个:
我希望得到类似的东西:
这是我的html
:
<table>
<tbody>
<tr>
<td><div class="box">P</div></td>
<td>My First Game</td>
<td>100 / 250 plays</td>
<td><a href="#">Players</a></td>
<td><a href="#">Duplicate</a></td>
<td><a href="#">Archive</a></td>
</tr>
<tr>
<td><div class="box">P</div></td>
<td>The best game ever if it was done.</td>
<td>0 / 250 plays</td>
<td><a href="#">Players</a></td>
<td><a href="#">Duplicate</a></td>
<td><a href="#">Archive</a></td>
</tr>
<tr>
<td><div class="box">P</div></td>
<td>Could be better but ya.</td>
<td>0 / 50 plays</td>
<td><a href="#">Players</a></td>
<td><a href="#">Duplicate</a></td>
<td><a href="#">Archive</a></td>
</tr>
</tbody>
</table>
这是我的css
(scss):
table {
border: none;
height: 33px;
padding: 0;
margin: 0;
}
.box {
width: 33px;
height: 33px;
background-color: #5AD427;
text-align: center;
margin: 0;
padding: 0;
}
这里有一个小提琴:http://jsfiddle.net/MattCamp/dzDm3/
我主要担心的是如何修复每行右侧的方框。我似乎无法弄清楚如何格式化它们,因此它们周围没有太多空间,也使得中间的字母居中。
答案 0 :(得分:1)
<tr>
<td>P</td>
<td>My First Game</td>
<td>100 / 250 plays</td>
<td><a href="#">Players</a></td>
<td><a href="#">Duplicate</a></td>
<td><a href="#">Archive</a></td>
</tr>
table {
width:100%; /**/
padding: 0;
margin: 0;
text-align:right; /**/
border-collapse:separate;
border-spacing: 0 2px;
}
table tr {background:#fff;}
table tr:hover {background:#eff;}
table tr td {padding:5px 8px;}
table tr td:first-child {border-left: 3px solid #fff;}
table tr td:last-child {border-right:3px solid #fff;}
table tr:hover td:first-child {border-left: 3px solid #4EB2E2;}
table tr:hover td:last-child {border-right:3px solid #4EB2E2;}
table tr td:nth-child(1){
color:#fff;
width: 33px;
background-color: #5AD427;
padding: 5px 0;
text-align: center;
}
table tr td:nth-child(2){
text-align:left;
}
答案 1 :(得分:0)
为什么不删除div
<table>
<tbody>
<tr>
<td class="box">P</td>
<td>My First Game</td>
然后将vertical-align:middle添加到.box css
答案 2 :(得分:0)
将盒子类放在td单元本身上,而不是放在td内的div上(完全删除div)。你可能正在对抗细胞填充,这就是你在盒子周围有这么多空白的原因。
查看行内字符定位的行高和垂直对齐CSS属性。
请参阅小提琴,例如:http://jsfiddle.net/dzDm3/2/
<td class='box'>P</td>
.box {
width: 26px;
height: 26px;
background-color: #5AD427;
text-align: center;
margin: 0;
padding: 0;
line-height: 26px;
}
答案 3 :(得分:0)
根据http://css-tricks.com/using-divs-inside-tables/绝对定位应该有效,但我不确定我是否正确地阅读了你的问题。检查这个网站,它提供了一个很好的教程和解释表内的div。