0

過去 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;
                }
            }
        }
    }
}
4

0 に答える 0