設置表單元格顏色

我有一個表格覆蓋圖像的頂部作爲其背景圖像。設置表單元格顏色

我想將單元格間距顏色設置爲白色，以便列看起來是分開的。

但是我不能設置<table>背景色，因爲它會影響背景顏色，我也希望它保持透明。

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

任何人都可以建議？

來源

2016-09-13 pekcheng

HTML代碼，如果可能的話 – Gowtham

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

來源

2016-09-13 10:01:33

如果我理解的很好，你只是想把一個背景圖片放到你的表中，並且要摺疊邊框？

在這裏，我設置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/

來源

2016-09-13 09:53:33 Mistalis

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

來源

2016-09-13 09:58:55 Gowtham

設置表單元格顏色

回答

相關問題