如何使 table 具有不同的间距和圆角

Question

我的尝试是创建一个具有唯一间距的 table，在这种情况下它将是 3 列，但在我的第一次尝试中我尝试使用矩形和直线，空白需要相互作用所以我发现尝试将 table 与自定义 css 一起使用会更好更明显，在我希望镜像自己的示例下方，我需要复制它。

我对 retancle 的尝试像这样很糟糕

<div class="_idGenObjectLayout-1">
    <div id="_idContainer000" class="_idGenObjectStyleOverride-1">
    </div>
</div>
<div class="_idGenObjectLayout-1">
    <div id="_idContainer001" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-2">
    </div>
</div>
<div class="_idGenObjectLayout-1">
    <div id="_idContainer002" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-3">
    </div>
</div>
<div class="_idGenObjectLayout-1">
    <div id="_idContainer003" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-4">
    </div>
</div>
<div class="_idGenObjectLayout-1">
    <div id="_idContainer004" class="Quadro-de-gr-fico-b-sico _idGenObjectStyleOverride-4">
    </div>
</div>

我的问题是如何使用 table 和 divs/html/css

正确地重现此 table

Answer 1

    .custom-table{
        border: 2px solid #6cb7e1;
        border-collapse: collapse;
        background-color: #287cb6;
        width: 410px;   
        height: 68px;
    }
    .custom-table td {
        border: 2px solid #6cb7e1;
    }
    .custom-table td span.line {
        border-bottom: 1px solid #3a86bd;
        display: block; 
    }
    .custom-table .arrow {
        width: 27px;
        position: relative;
        cursor: pointer;
    }
    .custom-table .arrow > span {
        border: 6px solid #d3a823;
        border-color: #d3a823 transparent transparent transparent;
        width: 0;
        height: 0;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform:translate(-50%, -50%)
    }

<table class="custom-table">
  <tr>
    <td>
        <span class="line">line</span>
    </td>
    <td rowspan="2">
        <span class="line">line</span>
        <span class="line">line</span>
    </td>
    <td rowspan="2" class="arrow">
        <span></span>
    </td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

我建议您结合使用 table、跨度和 css。

如何使 table 具有不同的间距和圆角

How to make table with different spacing and rounded corners

html

css

html-table