使用CSS在单独的框中显示父级和子级

Question

请查看以下网址：

"http://jsfiddle.net/7rsx0r4h/"

我希望输出像带有边框的输出表，应该看起来像单独的框但不想更改我的html（div布局）。此外，每个盒子我需要一些空间，然后另一个盒子开始。

谢谢， 和Manish

Answer 1

演示 - http://jsfiddle.net/victor_007/7rsx0r4h/1/

为第一个div添加了大纲

将body更改为父ID或类

body > div {
    outline:1px solid #4679bd;
}

将边框颜色更改为白色，使其看起来像空白

div div {
   border-top: 2px solid white;
}

＆＃13;

＆＃13;

body > div {
  outline: 1px solid #4679bd;
}
div {
  width: 496px;
  border: 2px solid white;
  border-top: 0;
  color: #fff;
  text-align: center;
  font-size: 120%;
  background: #4679bd;
}
div div {
  font-size: 100%;
  width: auto;
  border: 0;
  border-top: 2px solid white;
  line-height: 250%;
}

＆＃13;

<p>Divs:</p>
<div>
  <div>1
    <div>1.1
      <div>1.2
        <div>1.2.1</div>
      </div>
    </div>
  </div>
  <div>2
    <div>2.1
      <div>2.2
        <div>2.2.1</div>
      </div>
    </div>
  </div>
  <div>3</div>
  <div>4</div>
</div>
<br />
<p>Table:</p>
<table border="1px" width="500px">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>1.1</td>
  </tr>
  <tr>
    <td>1.2</td>
  </tr>
  <tr>
    <td>1.2.1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>3.1</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;