セルの枠線を崩壊させて浮動画像を表示しながらテーブルに二重枠を追加する

Question

私はこのサイトのすべての解決策を見つけようとしてきましたが、私のために働く。

タイトルが示唆しているように、私はダブルボーダーの方法を探していますtable第2のborderは浮遊画像を囲むだけではありません。

私がしていないことを指摘してください。

私はJSFiddleに簡易版を追加しました：

CSS：

table{ 
    border-collapse: collapse; 
    } 

td{ 
    border:solid 1px #0000FF; 
    } 

img{ 
    float:right; 
    margin-left:50px; 
    } 

EDIT：これは、（粗）結果の種類は、私が行くよさ

、右に浮かんだ画像ですが、borderはtableの周りを回っています。

Answer 1

私はお勧めのアプローチは<table>自体に2つ目の境界線を適用し、代わりに、<div>要素からborderプロパティを削除しています。 borderプロパティを使用するのではなく、代わりにbox-shadowプロパティを使用して、<table>の周りに2つの追加のソリッド「シャドウ」を作成しました。

第1の影は第2の部分を隠し、赤の境界線が1つしかないように見せます。

table { 
 
    /* This line defines two box-shadows; the first a shadow 
 
    of 3px spread and no blur of a white colour to partially 
 
    hide the second shadow which has 5px spread and coloured 
 
    red. The '0 0 0' defines the 'x' and 'y' position relative 
 
    to the box of which it is a shadow, the third is the 'blur' 
 
    radius: */ 
 
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px #f00; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: solid 1px #0000FF; 
 
} 
 
img { 
 
    float: right; 
 
    margin-left: 50px; 
 
}

<div> 
 
    <img src="captor.jpg" /> 
 
    <!-- I removed the 'style' attribute since I removed the border 
 
     from this element --> 
 
    <div> 
 
    <table> 
 
     <tr> 
 
     <td> 
 
      One 
 
     </td> 
 
     <td> 
 
      TWO 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      Three 
 
     </td> 
 
     <td> 
 
      FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR FOUR 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div>

しかしながら、これは、固体の着色影が<table>とその第二、外側境界間の「空白」を作成するために使用することができることを必要としません。