如何制作不同间距和圆角的桌子

Question

我的尝试是创建一个具有唯一间距的表格，在这种情况下它将是 3 列，但在我的第一次尝试中，我尝试使用矩形和直线，空白需要交互，所以我发现它更好更明显尝试使用带有自定义 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>

我的问题是如何使用带有 divs/html/css 的表正确重现此表

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、spans 和 css 的组合。