css边界等间距

Question

我确信有一种非常基本的方法来解决我的问题。不幸的是，我在前端开发方面确实缺乏经验，但我必须解决我的问题。简而言之，我的表中有一些动态边框，但每个边框之间应该有一些空格。

现在它看起来像下面的图像

但是，它应该像图像

我的代码如下。如何更改CSS？

.bg {
  width: 100%;
  padding-left: 2px;
  padding-right: 2px;
}
.chart {
  border: solid 1px #e31515;
  color: #e31515;
  width: 100%;
  position: absolute;
  overflow: hidden;
}

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<span style="overflow: hidden;left: 550px; height: 150px;  width: 250px; position: absolute; "> <div >
<table cellpadding="2" border="1">
  <tbody>
    <tr>
      <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
        <div class="bg" style="height: 129px">
          <div class="chart" style="height: 14px; margin-top: 115px"></div>
        </div>
      </td>
      <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent">
        <div class="bg" style="height: 129px">
          <div class="chart" style=" height: 14px; margin-top: 115px"></div>
        </div>
      </td>
    </tr>
  </tbody>
</table>
</div>
</span>
<span style="overflow: hidden;left: 150px; height: 150px;  width: 250px; position: absolute; ">
        <div >
            <table  cellpadding="2" border="1">
                <tbody>
                    <tr>
                        <td  style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
                            <div class="bg" style="height: 129px">
                                <div class="chart" style="height: 14px; margin-top: 115px"></div>
                            </div>
                        </td>
                        <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
                            <div class="bg" style="height: 129px">
                                <div class="chart" style="height: 14px; margin-top: 115px"></div>
                            </div>
                        </td>
                        <td style="overflow: hidden; border-top: #e9e8e8 1px solid; border-right: 0px; width: 1%; white-space: nowrap; border-bottom: #e9e8e8 1px solid; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; padding-right: 0px; background-color: transparent" >
                            <div class="bg" style="height: 129px">
                                <div class="chart" style="height: 14px; margin-top: 115px"></div>
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        </span>

Answer 1

您正在使用填充。相反，您需要使用保证金属性。在框模型中，填充用于对齐框的内部内容。但是，由于您正在应用该样式，您需要提及每个样式的margin-right属性。只需用bg风格的margin属性替换填充。

.bg { width: 100%; margin-left: 2px; margin-right: 2px; }

希望这会有所帮助。如果您发现此解决方案正确，请将其标记为答案。

Answer 2

CSS border-spacing属性可以满足您的需求。

table{
 border-collapse: separate;
 border-spacing: 10px;
}

此处示例：http://www.w3schools.com/csSref/tryit.asp?filename=trycss_table_border-spacing