Question

我在过去的20分钟内检查了大约50个链接并尝试了我能想到的各种组合，但我的th元素之间仍存在巨大的自动差距，如下图所示。 / p>

最终将删除测试列，以使该项的colspan为2，但同时我无法弄清楚如何消除此差距。

如您所见，item和test非常接近，这就是我想要的。其余的相隔数英里，而且我无法解决这个问题变得非常烦人。

Markup＆amp; 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;
                }
            }
        }
    }
}

控制TH元素之间的大量间距

0 个答案: