Question

您好我有这样的表你可以在这里看到演示版; 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

尝试删除margin-left：15px;来自span。

Answer 2

这应该是你桌子上的css和td。

<table style="table-layout: fixed;">
     <tr>
         <td style="word-wrap: break-word; white-space: nowrap;"></td>
     </tr>
</table>

Answer 3

添加此css规则解决了这个问题：

table {
  border-spacing:0;
}

请参阅https://jsfiddle.net/65g8ehdt/

Answer 4

在这里，我重新编写代码。

<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: 0; 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>

只需删除

保证金左：15px的

从这一行开始

<a href="/post/aa-3/" target="_blank" style="margin-left: 0; 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>

Answer 5

将此bootstrap css链接添加到您的html中，它将解决问题。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

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

5 个答案: