两两对应成排的表格样式

原创

于 2021-08-05 11:39:47 发布

· 158 阅读

0 ·

版权

当原生表格和组件的table无法满足特定样式需求时，可以采用盒子模型来拼写实现。本文介绍了如何利用HTML和行内CSS创建两两对应成排的表格效果，重点在于通过取余判断控制边框，以及处理最后一行的特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式需求

这种就不能用原生的表格样式和组件的table 来写
只能用盒子去拼写
下面是我写的 html css 样式是行内式有点乱

<div *ngIf="item['COMPETENT'] && item['COMPETENT'].length>0">
            <div style="margin-top: 25px;font-size: 16px;font-weight: 700;text-align: left;">考核称职律师：</div>
            <div style="padding-top: 5px;">
              <div style="width: 100%;display: flex;align-items: center;justify-content: left;flex-wrap:wrap;">
                <div style="display: flex;text-align: center;width: 33%