2つのテーブルの境界線を1つのセル内で完全に削除する

Question

大きなHTMLテーブルでは、2つの隣接するセルからなる入力部分があります。最初のものは右揃えのポンド記号で、次のものは入力セルです（この部分が金額を入力していることを知らせます）。

私は "ダブルセル"を赤い背景にしたいと思いますが、それらの間の白い境界線を取り除くことはできません。比較すると、2つのセルをcolspanで結合すると、明らかに分離が起こらず、入力セルのコンボに対しても同じ効果を作りたいと思います。

注：私はそのテーブルのどこにでも、それらのセルの間に境界線がないようにしたい。 <input>とpound記号の間の境界を削除

<table> 
 
    <tr> 
 
    <td style="background-color:red;text-align:right;padding-right:0;border-width: 1px 0 1px 1px;border-spacing:0px;">&pound;</td> 
 
    <td style="background-color:red;padding-left:0;border-width: 1px 1px 1px 0;border-spacing:0px;"> 
 
     <input type="text" style="background-color:red" value="0"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td style="background-color:green" colspan="2">no line</td> 
 
    </tr> 
 
</table>

Answer 1

、擬似:beforeを使用し、（redあなたのケースでは）同じ色の偽の境界線を作ります。

.pound-sign { 
 
    background-color:red; 
 
    text-align:right; 
 
    padding-right:0; 
 
    border-width: 1px 0 1px 1px; 
 
    border-spacing:0px; 
 
} 
 

 
.input-holder { 
 
    position: relative; 
 
    background-color:red; 
 
    padding-left:0; 
 
    border-spacing:0px; 
 
} 
 

 
.input-holder:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: -3px; 
 
    width: 3px; 
 
    height: 100%; 
 
    background: red; 
 
} 
 

 
.input-holder input { 
 
    background-color:red; 
 
    border: 1px solid #fff; 
 
} 
 

 
.green { 
 
    background-color:green; 
 
}

<table> 
 
    <tr> 
 
    <td class="pound-sign" style="">&pound;</td> 
 
    <td class="input-holder"> 
 
     <input type="text" value="0"> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td class="green" colspan="2">no line</td> 
 
    </tr> 
 
</table>

・ホープ、このことができます：

は、以下のスニペットを見てください！