简体   繁体   中英

Spacing between cols of table HTML/CSS

I am working on my website, http://www.isaveplus.com and I am having an issue of the table adding some space between each col (td) in it. My goal is to have the columns touching because I want the background color to blend in with each other. The picture below will show you what I meant by the space between them.

Thanks in advance!

 <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>

And the css for searchbar is:

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

       padding:0px;  

     }

在此处输入图片说明

Your code isn't displaying the same in my browser as in the picture you give. But essentially I think you either want to put a negative margin-right on the div ddtopmenubar or a border-left:1px solid white on the following td. There might be another way to do it but I think that'd work.

Your links

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

have a

border-right: 1px solid white

defined in

.mattblackmenu li a  

there you can set the width of these white spaces

Have you tried the border-collapse property? http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-collapse

border-collapse: collapse;

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM