CSS 横向 space div table

Question

我正在 CSS 中制作 div table。我想要做的是在边距和 table 单元格之间以及 table 单元格之间设置相同的 space。

这就是我想要实现的：

但这是目前的样子：

我将此代码用于 class:

 .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 个关键语法错误，请参阅代码段 2：

       collapse:separate;

AND

       cell-spacing:5px;

应该是：

        border-collapse:separate;

AND

        border-spacing:5px

现在它看起来和你想要的完全一样。

使用border-spacing

片段 1

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;
}

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

片段 2

.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;
}

<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>

Answer 2

设置Class

.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>

CSS 横向 space div table

CSS Horizontal space div table

html

css

tableviewcell

css-tables

更新

片段 1

片段 2