表のセル区切りの色を設定する

画像の上に表の上にオーバーレイが表示されますの背景画像です。表のセル区切りの色を設定する

セルのセルの色を白色に設定して、列が分離して見えるようにしたいとします。

しかし、<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; 
      }

誰でもアドバイスできますか？

出典

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

表のセル区切りの色を設定する

答えて

関連する問題