如何格式化?<table> </table> </div>中的<div>

时间:2013-11-26 21:44:14

标签: html css html-table

我有这个:

enter image description here

我希望得到类似的东西:

enter image description here

这是我的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/

我主要担心的是如何修复每行右侧的方框。我似乎无法弄清楚如何格式化它们,因此它们周围没有太多空间,也使得中间的字母居中。

4 个答案:

答案 0 :(得分:1)

demo

enter image description here

  <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。