在折叠单元格边框并具有浮动图片时为表格添加双边框

Question

我一直在浏览整个网站，试图为此找到解决方案，但只找到了一些对我不起作用的半相关问题。

正如标题所暗示的那样，我正在寻找一种双边界table的方法，其中第二个border不仅包围浮动图片。

请指出我不做的事情。

我在JSFiddle添加了一个简单的版本：

CSS：

table{
    border-collapse: collapse;
  }

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

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

修改

这是（粗略地）我想要的结果，右边是漂浮的图片，但第二个border仅围绕table。

Answer 1

我建议的方法是从border元素中删除<div>属性，而是将第二个边框应用于<table>本身。虽然我没有使用border属性，而是使用box-shadow属性在<table>周围创建了两个额外的实体“阴影”。

第一个阴影隐藏了第二个阴影的一部分，使其看起来好像只有一个红色边框。

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>与其第二个外边框之间的“空白区域”。