html - CSS，如何设置布局

Question

我有以下代码来显示表格

<div class="topologyBalloon" id="bl_c2f03b99-6d62-43c4-9a35-4b4cbf22a7db"> 
  <a href="#close" class="closeTopologyBalloon">×</a>
  <div class="contentBody">

    <table class="detailInfoTable">
      <caption>private</caption>
      <tbody>
        <tr>
          <th class="device">ID</th>
          <td>c2f03b99-6d62-43c4-9a35-4b4cbf22a7db</td>
        </tr>
        <tr>
          <th class="device">status</th>
          <td>
            <span class="active">ACTIVE</span>
          </td>
        </tr>
      </tbody>
    </table>

    <table class="detailInfoTable">
      <caption>subnets</caption>
      <tbody>
        <tr>
          <th>
            <span title="cc59732b-4ce8-4aae-bab5-fac80c135440">
              <a href="/dashboard/project/networks/subnets/cc59732b-4ce8-4aae-bab5-fac80c135440/detail">cc59732b-4ce8-4aae-bab5-fac80c135440</a>
            </span>
          </th>
          <td>10.10.10.0/24</td>
        </tr>
    <tr>
          <th>
            <span title="4394b976-f98c-4696-8348-5f6c78a8987e">
              <a href="/dashboard/project/networks/subnets/4394b976-f98c-4696-8348-5f6c78a8987e/detail">4394b976-f98c-4696-8348-5f6c78a8987e</a>
            </span>
          </th>
          <td>10.10.11.0/24</td>
        </tr>
  </tbody>
    </table>

  </div>
  <div class="footer">
    <div class="footerInner">
      <div class="cell link">
        <a href="/dashboard/project/networks/c2f03b99-6d62-43c4-9a35-4b4cbf22a7db/detail">» check detail information</a>
      </div>
    </div>
  </div>
</div>

和 CSS 文件

table, th, td{
  border: 0px solid blue;
}

caption {
    font-weight: bold;
}

th {
    color: #D0D0D0;
}

.active {
    display:block;
    margin-right:5px;
    border-radius:10px;
    width:9px;
    height:9px;
    background-color:#ff6f0b
}

输出看起来像这样

如何缩进表格并划线来分隔拖车台？以下是输出

Answer 1

希望你需要这样的东西:

table, th, td{
  border: 0px solid blue;
}

caption {
    font-weight: bold;
    text-align: left
}

th {
    color: #D0D0D0;
}


.active::before {
  content: " ";
  display:inline-block;
  border-radius:10px;
  width:9px;
  height:9px;
  background-color:#ff6f0b;

}

<div class="topologyBalloon" id="bl_c2f03b99-6d62-43c4-9a35-4b4cbf22a7db"> 
  <a href="#close" class="closeTopologyBalloon">×</a>
  <div class="contentBody">

    <table class="detailInfoTable">
      <caption>private</caption>
      <tbody>
        <tr>
          <th class="device">ID</th>
          <td>c2f03b99-6d62-43c4-9a35-4b4cbf22a7db</td>
        </tr>
        <tr>
          <th class="device">status</th>
          <td>
            <span class="active">ACTIVE</span>
          </td>
        </tr>
      </tbody>
    </table>
<HR/>
    <table class="detailInfoTable">
      <caption>subnets</caption>
      <tbody>
        <tr>
          <th>
            <span title="cc59732b-4ce8-4aae-bab5-fac80c135440">
              <a href="/dashboard/project/networks/subnets/cc59732b-4ce8-4aae-bab5-fac80c135440/detail">cc59732b-4ce8-4aae-bab5-fac80c135440</a>
            </span>
          </th>
          <td>10.10.10.0/24</td>
        </tr>
    <tr>
          <th>
            <span title="4394b976-f98c-4696-8348-5f6c78a8987e">
              <a href="/dashboard/project/networks/subnets/4394b976-f98c-4696-8348-5f6c78a8987e/detail">4394b976-f98c-4696-8348-5f6c78a8987e</a>
            </span>
          </th>
          <td>10.10.11.0/24</td>
        </tr>
  </tbody>
    </table>

  </div>
  <div class="footer">
    <div class="footerInner">
      <div class="cell link">
        <a href="/dashboard/project/networks/c2f03b99-6d62-43c4-9a35-4b4cbf22a7db/detail">» check detail information</a>
      </div>
    </div>
  </div>
</div>