CSS水平空间div表

Question

我正在使用CSS中的div表。我要做的是在边距和表格单元格之间以及表格单元格之间设置相同的空间。

这就是我想要实现的目标：

但这就是它目前的样子：

我在课堂上使用此代码：

 .tfoto{width:600px;
        display:table;
        margin-left:200px;
        border-top-style:dotted;
        border-bottom-style:dotted;
        border-left-style:dotted;
        border-right-style:dotted;
        text-align:center;

        background-color:transparent;
        border-spacing:1px;
        collapse:separate;}

.tcaption {display:table-caption;
           font:"Traditional Arabic";}

.trow {display:table-row;
       width:200px;
       cell-spacing:5px;
       padding:5px;}

.tdcell {display:table-cell;
         width:200px;
         padding:5px;}

Answer 1

更新

看起来你非常接近，但是你有两个关键的语法错误，请参阅代码段2：

       collapse:separate;

和

       cell-spacing:5px;

应该是：

        border-collapse:separate;

和

        border-spacing:5px

现在看起来完全符合您的要求。

使用border-spacing

SNIPPET 1

＆＃13;

＆＃13;

table {
  table-layout: fixed;
  border-spacing: 5px;
  outline: 5px solid #fff;
  width: 200px;
  height: 200px;
  margin: 20px auto;
}
td {
  outline: 5px solid #fff;
  background: #000;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

SNIPPET 2

＆＃13;

＆＃13;

.tfoto {
  width: 600px;
  display: table;
  margin-left: 200px;
  border-top-style: dotted;
  border-bottom-style: dotted;
  border-left-style: dotted;
  border-right-style: dotted;
  text-align: center;
  background-color: transparent;
  border-spacing: 1px;
  border-collapse: separate;
}
.tcaption {
  display: table-caption;
  font: "Traditional Arabic";
}
.trow {
  display: table-row;
  width: 200px;
  border-spacing: 5px;
  padding: 5px;
}
.tdcell {
  display: table-cell;
  width: 200px;
  padding: 5px;
}
.imgs {
  width: 100%;
  height: 200px;
}

＆＃13;

<div class="tfoto">
  <div class="tcaption">
    <p><em>Sample text.</em>
    </p>
  </div>
  <div class="trow">
    <div class="tdcell">
      <img class="imgs" src="foto1.jpg">
    </div>
    <div class="tdcell">
      <img class="imgs" src="foto2.jpg">
    </div>
  </div>
  <div class="trow">
    <div class="tdcell">
      <img class="imgs" src="foto3.jpg">
    </div>
    <div class="tdcell">
      <img class="imgs" src="foto4.jpg">
    </div>
  </div>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

设置班级

.imgs{
    width:100%;
    height:200px;
}

结帐：

.tfoto{width:600px;
        display:table;
        margin-left:200px;
        border-top-style:dotted;
        border-bottom-style:dotted;
        border-left-style:dotted;
        border-right-style:dotted;
        text-align:center;

        background-color:transparent;
        border-spacing:1px;
        collapse:separate;}

.tcaption {display:table-caption;
           font:"Traditional Arabic";}

.trow {display:table-row;
       width:200px;
       cell-spacing:5px;
       padding:5px;}

.tdcell {display:table-cell;
         width:200px;
         padding:5px;}
 .imgs {width:100%;
	     height:200px;}

<div class="tfoto">
		<div class="tcaption">
			<p><em>Sample text.</em></p>	
		</div>
		<div class="trow">
		<div class="tdcell">
		<img class="imgs" src="foto1.jpg">
		</div>
		<div class="tdcell">
		<img class="imgs" src="foto2.jpg">
		</div>
		</div>
		<div class="trow">
		<div class="tdcell">
		<img class="imgs" src="foto3.jpg">
		</div>
		<div class="tdcell">
		<img class="imgs" src="foto4.jpg">
		</div>
		</div>

</div>