如何制作不同间距和圆角的表格

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、span 和 css。