Question

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

我想将 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;
           }

有人可以提供建议吗？

Answer 1

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

背景图片示例：https://jsfiddle.net/c8evw5eo/

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

设置表格cellspacing颜色

3 个答案: