html - CSS - 修复 TABLE 的错误

Question

原始表:

我的表:

乍一看有区别，它以两种方式变得首先是字体的颜色，这在 atm 中并不是很重要。重要的是我的 ICON 离文本的其余部分很远而且它不在行的中间，有人可以帮我修复它吗？

我的 CSS:

tr {
    display: block;
    border-bottom: 1px solid #ccc;
}
td {
    padding: 7px 30px;
    white-space: nowrap;
    color:999999;
}
.icon {
    background-image: url("images/cs_icon.png");
    background-size: 24px 22px;
    background-repeat: no-repeat;
    padding-right: 20px;
}
td a{
    color:#1a6eb6;
    text-decoration: none;
}

我的 HTML:

              <table>
                <tr>
                <td class="icon"></td>
                <td>Public server#1</td>
                <td>IP: 88.88.88.87:270115</td>
                <td>Mapa: de_dust2</td>
                <td>Hráči: 40/60</td>
                <td><a href="#">Detail</a></td>
                </tr>
.....

fiddle : http://jsfiddle.net/Fzw7L/

Answer 1

这似乎是因为你指定你的图标有 padding-right: 20px;!

尝试删除它，或将值减小到 5px 之类的值以反射(reflect)您的模型