Question

I’m building in HTML three asymmetric tables like this:

     <table id="d1">
       <tr>
         <th colspan="2">ATIS-GESTEL</th>
       </tr>
       <tr>
         <td class="label">Petición:</td>
         <td class="value">171601792</td>
       </tr>
     </table>

     <table id="d2">
       <tr>
         <th colspan="2">FACILITADOR-SAC</th>
       </tr>
       <tr>
         <td class="label">OT:</td>
         <td class="value">171601792</td>
       </tr>
     </table>

    <table id="d3">
       <tr>
         <th colspan="2">SAC</th>
       </tr>
       <tr>
         <td class="label">Ticket:</td>
         <td class="value"></td>
       </tr>
     </table>

I have to style some of the properties with CSS, including giving <td>‘s with the class “value” a yellow background color. Well, the background color does change, but there’s a little space there, like a border. It doesn’t fill completely. Just in case, here’s the CSS:

body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:12px;
    color:#666666;
    text-align:left; 
}

td {
  padding-top: 0px;
  padding-left: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
}
#container {
   width: 800px;
   height: 600px;
   border:1px solid #333333;
}

#header {
   padding-left: 7px;
}

#d1 {
   float: left;
   margin-left: 15px;
   margin-right: 15px;
   border: 1px solid #333333;

}

#d1 tr td.value{
  width: 100px;
  height: 15px;
  background-color: #FFFF66;
}

#d2 {
   float: left;
   margin-left: 15px;
   margin-right: 15px;
   border: 1px solid #333333;
   width: 150px;
   height: 40px;
}

#d2 tr td.value{
  width: 100px;

Can someone tell me why it’s that border appearing, and how to completely fill the cell?

Answer 1

Add border-collapse:collapse to the <table>‘s styles.