Controlling The Massive Spacing Between TH Elements

Controlling The Massive Spacing Between TH Elements

I've checked about 50 links in the past 20 minutes and tried every
combination of stuff I can think of but there is still this massive
automatic gap between my th elements, as seen in the picture below.
The test column will eventually be removed so that item has a colspan of
2, but in the mean time I cannot figure out how to remove this gap.
Picture: http://imgur.com/Herr27e
Markup & CSS: Both generated from HAML and SCSS respectively.
<div class="ticker">
<h2>NEW LISTINGS</h2>
<div class="ticker-body">
<table id="new-listings">
<thead>
<tr>
<th>Item</th>
<th>test</th>
<th>Seller</th>
<th>Seller Wants</th>
</tr>
</thead>
<tbody>
<tr>
<td class="item-image">
<div class="item-image-container">
<a href="#"></a>
</div>
</td>
<td>Item Name</td>
<td>tsujp</td>
<td>Something Else Here</td>
</tr>
<tr>
<td class="item-image">
<div class="item-image-container">
<a href="#"></a>
</div>
</td>
<td>Item Name</td>
<td>tsujpdsds</td>
<td>Something Else Here</td>
</tr>
</tbody>
</table>
</div>
</div>



.ticker
{
.ticker-body
{
margin-top: 10px;
border: 1px solid $type25Border;
@include transition( border 0.2s ease-in-out );
&:hover
{
border: 1px solid $greenText;
}
}
}
table#new-listings
{
width: 645px;
color: $whiteText;
thead
{
font-family: "opensans-SB";
font-size: 14px;
th
{
padding-top: 15px;
padding-bottom: 8px;
}
}
th, td
{
text-align: left;
vertical-align: middle;
padding: 5px 10px 5px 10px;
}
tbody
{
tr
{
font-family: "opensans-R";
font-size: 12px;
//border-top: 1px solid $type35Border;
&:nth-child(odd) { background-color: $type60Background; }
&:nth-child(even) { background-color: $type70Background; }
.item-image
{
width: 45px;
height: 32px;
.item-image-container
{
width: 100%;
height: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
background-image: url( "src/hornmask.png" );
border: 1px solid $type35Border;
box-shadow: $softShadow;
}
}
}
}
}