设置表格单元格间距颜色答案

【问题标题】：Set Table cellspacing color设置表格单元格间距颜色
【发布时间】：2017-01-20 20:46:15
【问题描述】：

我有一个表格覆盖在图像的顶部作为它的背景图像。

我想将 cellspacing 颜色设置为白色，以便各列看起来是分开的。

但是我无法设置<table> 背景颜色，因为它也会影响<td> 背景颜色，我希望它保持透明。

每个<td> 也有自己的边框颜色，因此我无法将其边框颜色调整为白色。

<div id="container">
  <img id="mybackgroundimage" />
  <table id="table">
    <tr>
      <td class="green"></td>
      <td class="green"></td>
      <td class="red"></td>
    </tr>
    <tr>
      <td class="red"></td>
      <td class="green"></td>
      <td class="red"></td>
    </tr>
 </table>
</div>




        #container{
            position: relative;
        }

        #table {
            border-spacing: 2px;
            position: absolute;
            top: 0;
        }

           #table td.green {
               border-color: green;
           }

           #table td.red {
               border-color: red;
           }

谁能给点建议？

【问题讨论】：

HTML 代码（如果可能）

标签： html css html-table

【解决方案1】：

选项 1：为单元格使用实线轮廓。

#table {
  border-spacing: 2px;
  position: absolute;
  top: 0;
}

#table td {
  outline: 2px solid #ccc;
}

#table td.green {
  border: 1px solid green;
}

#table td.red {
  border: 1px solid red;
}

<table id="table">
  <tr>
    <td class="green">Cell one</td>
    <td>Cell two</td>
  </tr>
  <tr>
    <td>Cell three</td>
    <td class="red">Cell four</td>
  </tr>
</table>

选项 2：使用零模糊半径的盒子阴影。

#table {
  border-spacing: 2px;
  position: absolute;
  top: 0;
}

#table td {
  box-shadow: 0 0 0 2px #ccc;
}

#table td.green {
  border: 1px solid green;
}

#table td.red {
  border: 1px solid red;
}

<table id="table">
  <tr>
    <td class="green">Cell one</td>
    <td>Cell two</td>
  </tr>
  <tr>
    <td>Cell three</td>
    <td class="red">Cell four</td>
  </tr>
</table>

【讨论】：

【解决方案2】：

如果我理解得很好，你只是想在你的桌子上放一张背景图片，然后折叠边框？

这里我将background-color 设置为红色，但您也可以使用图像。

table, th, td {
  border:2px solid white;
  border-collapse: collapse;
}

<html>
  <div style="background-color:red;padding:10px;">
    <table>
      <tr><td>A</td><td>A</td><td>A</td></tr>
      <tr><td>A</td><td>A</td><td>A</td></tr>
    </table>
  </div>
</html>

带有背景图像的示例：https://jsfiddle.net/c8evw5eo/

【讨论】：

【解决方案3】：

.row1{
border: 15px solid white
}
.row2{
border: 15px solid white
}

<html> 
  <body >
    <table border=1 bgcolor=green cellspacing=15>
      <tr> <td class="row1"> January </td> <td class="row1"> February </td> </tr> 
      <tr> <td  class="row2"> March </td> <td  class="row2"> April </td> 
      </tr> 
    </table> 
  </body> 
</html>

【讨论】：