html - 通过减小 td 的大小来删除表中两个 td 之间的空白

Question

你好，我有一张这样的 table 你可以在这里看到演示版本； https://jsfiddle.net/mxpLpbbw/ 如果您看到，一个单元格就是数字(顶部和底部应该有投票箭头，但由于某种原因没有显示)。

<table>

<tr id="cell">
          <td class="vert-align">
  <div class="voting-space">

            <a href="/post/aa-3/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
            <br />

<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_aa-3">+ 1</h4></span>     <br>

<a href="/post/aa-3/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
        </div>
          </td>


<td class="vert-align">

     <h4 id="line">
        <a href="/post/aa-3/" target="_blank" style="margin-left: 15px; text-decoration:none;"> <img src="https://images.unsplash.com/photo-1453365607868-7deed8cc7d26?crop=entropy&amp;fit=crop&amp;fm=jpg&amp;h=800&amp;ixjsv=2.1.0&amp;ixlib=rb-0.3.5&amp;q=80&amp;w=1550" height="85" width="85"/><span id="title-font">
          aa</span></a>
        <span style="margin-left: 15px;" class="domain">(be kind to one another)</span>
        <br />
      </h4>





</td>
</table>

我遇到的问题是第一个单元格和第二个单元格之间的距离太大。我将填充设置为零，但发生了这种情况，第一个带有数字的单元格的宽度右侧宽度太大，这正在发生。

.table tr>td {
    vertical-align: middle;
    padding: 2px 0 2px 0;
    border-bottom: 1px solid #eaebec;
}

如何减小该单元格的大小？

Answer 1

添加这个 css-rule 解决了这个问题:

table {
  border-spacing:0;
}

参见 https://jsfiddle.net/65g8ehdt/