title: Why I can't see borders for columns in this table row?
body: <p>What I have is an html page and here an image for it :</p>
  
  <p><img src="https://i.stack.imgur.com/cO113.png" alt="enter image description here"></p>
  
  <p>As you can see I have a table and in the first row the border works just fine but in the next one in the table it doesn't show the vertical lines instead it shows around each button which I don't want too .. and the horizontal one its cut between each cell .. and I guess it's because of the margin .. so how can I make the horizontal lines continuous and the vertical lines appear? Can anyone tell me what the problem is?</p>
  
  <p>Here is my html code:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;/div&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td width="188px" class="button" &gt;&lt;img src="b2.png" /&gt;&lt;/td&gt;
  
  &lt;td width="188px" class="button" &gt;&lt;/td&gt;
  &lt;td width="188px" class="button" &gt;&lt;/td&gt;
  &lt;td width="188px" class="button" &gt;&lt;/td&gt;
  &lt;td width="188px" class="button" &gt;&lt;img src="b1.png" /&gt;&lt;/td&gt;
  &lt;td width="188px" class="button" &gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>and here is CSS :</p>
  
  <pre><code>.button {
      width:180px;
      text-align:center;
      background:rgb(51,153,51);
      position:relative;
      overflow:hidden;
      margin-top:1px;
        margin-bottom:1px;
          margin-left:1px;
          margin-right:12px;
      float: left; /* add this */
  }
  
  table td {
  
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
       border:1.0px solid #000;
  }
  </code></pre>
  
  <p>Can anyone help me?</p>