CSS实现div呈现Table的效果，并在PC端和移动端实现响应式布局

为了实现用div呈现Table的效果，并在PC端和移动端响应式布局：

<style type="text/css">.grid-table {
                      --leftGridTableWidth: 70px; /* 移动端左边名称的宽度 */
                      --leftGridTableBackGroundColor: #E0E0E0; /* 移动端左边名称的背景色 */
                      --rowFirstBackGroundColor: #c9d7c6; /* 移动端每一条数据第一行的背景颜色 */
                      --PCGridTableHeaderBackGroundColor: #9a9896; /* PC 端表头的背景颜色 */
                      --gridTableBorderColor: #817f7f; /* 边框的颜色 */
                      --gridTableBackgroundColor: #ffffff; /* 单元格的背景颜色 */
                      --gridTableHeadFontColor: #000000; /* 表头的字体颜色 */
                      --gridTableHeadHeight: 40px; /* 表头的高度 */
                      grid-template-columns: 30px 85px 80px 80px auto 170px; /* 列表格各列的宽度 */
                      display: grid;
                      border: 1px solid #817f7f;
                      background-color: #817f7f;
                      border-collapse: collapse;
                      grid-column-gap: 1px;
                      grid-row-gap: 1px;
                      width:100%;
                      margin: 0px auto;
                }
                /* 给单元格合并边框 grid-column-gap,grid-row-gap,background-color 实现边框 */
                .grid-table > div {
                    padding: 2px 2px;
                    box-sizing: border-box;
                    word-break:break-all;
                    word-wrap:break-word;
                    background-color: var(--gridTableBackgroundColor);
                    border: 0px solid rgba(0, 0, 0, 0.8);
                }
                /* 表头样式 */
                .grid-table > .header {
                    background-color: var(--PCGridTableHeaderBackGroundColor) !important;
                    font-weight: bold !important;
                    text-align: center !important;
                    display:flex;
                    justify-content:center;
                    align-items:center;
                    color: var(--gridTableHeadFontColor) !important;
                    position:sticky !important;
                    z-index: 1000 !important;
                    height: var(--gridTableHeadHeight) !important;
                    top:0px !important;
                }

                .grid-table > div.cell:nth-child(6n + 1) {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                /* 手机、平板端响应式调整 */
                @media (max-width: 768px) {
                      .grid-table {
                        display: block; /* 取消grid，变为块状 */
                        max-width: 100%;
                        margin: 0 auto;
                      }

                      .grid-table > div {
                        display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        border: none;
                        border-bottom: 1px solid var(--gridTableBorderColor);
                      }

                      /* 隐藏表头 */
                      .grid-table > .header {
                        display: none;
                      }

                     .grid-table > div.cell {
                         width: 100%;
                         position: relative;
                         padding-left: calc(var(--leftGridTableWidth) + 2px); /* 给主内容留空间 */
                         padding-right: 2px;
                         box-sizing: border-box;
                     }
                     /* 给伪元素些基本样式 */
                     .grid-table > div.cell::before {
                         content: attr(data-label);
                         flex-basis: var(--leftGridTableWidth);
                         color:  var(--gridTableHeadFontColor);
                         position: absolute;
                         left: 0;
                         top: 0;
                         width: var(--leftGridTableWidth);
                         height: 100%;
                         background-color: var(--leftGridTableBackGroundColor);
                         display: flex;
                         justify-content: center;
                         align-items: center;
                         font-weight: bold;
                         padding-right: 2px;
                         box-sizing: border-box;
                         font-weight: bold;
                         border-right: 1px solid var(--gridTableBorderColor);
                     }
                     .grid-table > div.cell:nth-child(6n + 1) {
                         display: block; 
                         justify-content: unset; 
                         align-items: unset;
                         background-color: var(--rowFirstBackGroundColor);
                     }
                     /* 通过 nth-child 选择的方式给每个单元格前添加标题 */
                     .grid-table > div.cell:nth-child(6n + 1)::before {
                         background-color: var(--rowFirstBackGroundColor);
                     }  
                }</style>

<div class="container mainContentBodyNoPage">
    <div class="grid-table">
          <div class="header">序号</div>
          <div class="header">产生日期</div>
          <div class="header">控制器</div>
          <div class="header">方法</div>
          <div class="header">错误日志</div>
          <div class="header">来源</div>

           @foreach (var item in errorLogs)
            {
                <div class="cell" data-label="序号">@(++xh)</div>
                <div class="cell" data-label="产生日期">@item.AddDate</div>
                <div class="cell" data-label="控制器">@item.Controller</div>
                <div class="cell" data-label="方法">@item.Action</div>
                <div class="cell" data-label="错误日志" style="text-align:left;">@item.ErrorMessage</div>
                <div class="cell" data-label="来源">@item.Url</div>
            }
    </div>
</div>