将 double-border 添加到 table，同时折叠单元格边框和浮动图片

Question

我一直在整个网站上寻找解决方案，但只找到了 semi-related 对我来说不太适用的解决方案。

如标题所示，我正在寻找一种方法来获得 double-bordered table，其中第二个 border 不只是围绕浮动图片。

请指出我没有做的事情。

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

CSS:

table{
    border-collapse: collapse;
  }

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

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

编辑：

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

Answer 1

我推荐的方法是从 <div> 元素中删除 border 属性，而是将第二个边框应用于 <table> 本身。尽管我没有使用 border 属性，而是使用 box-shadow 属性在 <table> 周围创建了两个额外的实体 'shadows'。

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

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> 与其第二个外部边框之间创建 'white-space'。

将 double-border 添加到 table，同时折叠单元格边框和浮动图片

Adding a double-border to a table while collapsing cell borders and having a floating picture

html

css

border

css-float