Question

我有这个：

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/

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

Answer 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;
}

Answer 2

为什么不删除div

<table>
<tbody>
  <tr>
    <td class="box">P</td>
    <td>My First Game</td>

然后将vertical-align：middle添加到.box css

Answer 3

将盒子类放在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;
}

Answer 4

根据http://css-tricks.com/using-divs-inside-tables/绝对定位应该有效，但我不确定我是否正确地阅读了你的问题。检查这个网站，它提供了一个很好的教程和解释表内的div。

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

4 个答案: