如何制作不同間距和圓角的表格

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。