不使用table标签，结合弹性布局和选择器实现table表格

最新推荐文章于 2024-07-07 17:09:26 发布

喔烨鸭

最新推荐文章于 2024-07-07 17:09:26 发布

阅读量947

点赞数

文章标签：前端 css html5

本文链接：https://blog.csdn.net/qq_45432996/article/details/121854852

版权

在这里插入图片描述

<div class="list">
        <div class="listitem">1</div>
        <div class="listitem">2</div>
        <div class="listitem">3</div>
        <div class="listitem">4</div>
        <div class="listitem">5</div>
        <div class="listitem">6</div>
        <div class="listitem">7</div>
 </div>

css

.list{
  display: flex;
  flex-wrap: wrap;
  width: 99%;
  background-color: #ff6;
    .listitem{
        width: 33%;
        background-color: #f1f1f1;
        border-bottom: solid 1px #0ff;
        border-right: solid 1px #0ff;
    }
    .listitem:nth-child(1){
        border-top: solid 1px #0ff;
    }
    .listitem:nth-child(2){
        border-top: solid 1px #0ff;
    }
    .listitem:nth-child(3){
        border-top: solid 1px #0ff;
    }
    .listitem:nth-of-type(3n-2){
    border-left: solid 1px #0ff;
}
}