0

Hello I have a table like this you can see the demo version here; https://jsfiddle.net/mxpLpbbw/ if you see, one cell is the number(there should be voting arrows top and bottom but it's not showing for some reason). 

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

The problem I'm having is that first cell and the second cell has too much distance between them. I set the padding to zero but this happens, the width of the first cell with the number has too big right width this is happening.

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

how do I decrease the size of that cell?

mike braa
  • 647
  • 1
  • 12
  • 33
  • 1
    Possible duplicate of [Set cellpadding and cellspacing in CSS?](http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css) – Burki Mar 02 '16 at 08:00
  • Tables have cell padding (whitespace inside the cell) and cell spacing (space between the cell,s i.e. outside of them. have a look [here](http://stackoverflow.com/questions/339923/set-cellpadding-and-cellspacing-in-css) – Burki Mar 02 '16 at 08:01
  • @Burki hmm not really.... – mike braa Mar 02 '16 at 08:05

5 Answers5

0

try to remove margin-left: 15px; from span.

Ankit Gupta
  • 2,529
  • 2
  • 15
  • 26
0

This should be the css on your table and td.

<table style="table-layout: fixed;">
     <tr>
         <td style="word-wrap: break-word; white-space: nowrap;"></td>
     </tr>
</table>
rjps12
  • 587
  • 6
  • 15
0

Adding this css-rule solves the issue:

table {
  border-spacing:0;
}

See https://jsfiddle.net/65g8ehdt/

TheQ
  • 6,858
  • 4
  • 35
  • 55
0

Here I re-write your code. 

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

Just remove

margin-left:15px

from this 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>
Himanshu Vaghela
  • 1,089
  • 11
  • 21
0

add this bootstrap css link into your html it will solve the issue.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
Iqbal Pasha
  • 1,318
  • 1
  • 8
  • 12