Question

我正在构建HTML三个非对称表，如下所示：

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

我必须使用CSS设置一些属性的样式，包括为<td>提供类“value”黄色背景颜色。嗯，背景颜色确实发生了变化，但那里有一点空间，就像边框一样。它没有完全填满。以防万一，这是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;

有人可以告诉我为什么边界出现，以及如何完全填充细胞？

Answer 1

将border-collapse:collapse添加到<table>的样式中。

Answer 2

也许边框间距也可能是一个问题。将其设置为零。

table.mytable {
border-spacing: 0;
}

用颜色填充表格单元格

2 个答案: