過去 20 分間で約 50 のリンクをチェックし、考えられるあらゆる組み合わせを試しth
ましたが、下の図に示すように、要素間にはまだ大きな自動ギャップがあります。
テスト列は最終的に削除されるため、アイテムの colspan は 2 になりますが、その間、このギャップを削除する方法がわかりません。
ご覧のとおり、item
非常test
に近いです。これが私が望んでいることです。残りは何マイルも離れており、これを解決できないことは非常に面倒です。
写真: http://i.imgur.com/Herr27e.png
マークアップと CSS: どちらも HAML と SCSS からそれぞれ生成されます。
<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;
}
}
}
}
}