表格HTML / CSS的列之间的间距

Question

我正在我的网站http://www.isaveplus.com上工作，我遇到了一个问题，即在每个col（td）之间添加一些空格。我的目标是让列接触，因为我希望背景颜色相互融合。下面的图片将向您展示我们之间的空间意味着什么。

提前致谢！

 <table style="width:inherit; margin-left:-5px; margin-top:-5px; " cellspacing="0">
   <tr>
     <td class="searchBar" align="left" >
        <div id="ddtopmenubar" class="mattblackmenu" >
          <ul>
             <li><a  style="vertical-align:bottom;">Best of Coupons</a></li>
             <li>
                <a style="vertical-align:bottom;"> Best of Travel</a>
                <a style="vertical-align:bottom;">Grocery  stores</a>
             </li>
             <li><a style="vertical-align:bottom;">Office Supplies</a></li>
             <li><a style="vertical-align:bottom;"> Department <br /> stores </a></li>
             <li><a style="vertical-align:bottom;">Drug <br /> stores</a></li>
          </ul>
        </div>
      </td>
      <td class="searchBar" align="left">
           <asp:Button ID="whatIsIsavePlusButton" runat="server" onclick="whatIsIsavePlusButton_Click" style="color: #800000; font-weight: 700"     Text="?" Visible="False" />
      </td>
      <td class="searchBar" align="left">social media right here!</td>
    </tr>
  </table>

搜索栏的css是：

 .searchBar
     {
       background-color: #414141;
       color:White;
       width:auto; 
       margin:-5px;

       padding:0px;  

     }

Answer 1

您的代码在我的浏览器中显示的内容与您提供的图片中的代码不同。但基本上我认为你要么在div ddtopmenubar上放置负margin-right，要在下面的td放置border-left:1px solid white。可能有另一种方法可以做到，但我认为这样做。

Answer 2

您的链接

<a style="vertical-align:bottom;">Best of Travel<a style="vertical-align:bottom;">Grocery  stores</a>  

有一个

border-right: 1px solid white

中定义的

.mattblackmenu li a  

你可以设置这些空格的宽度

Answer 3

您是否尝试过border-collapse财产？ http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse

border-collapse: collapse;