table表格模板（自用）

Ciwei蓝

已于 2022-10-13 16:10:38 修改

阅读量451

点赞数

分类专栏： 2022css学习笔记文章标签： servlet java javascript

于 2022-10-13 15:01:29 首次发布

本文链接：https://blog.csdn.net/Blue54/article/details/127301729

版权

2022css学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

例子：

标签：

<div class="first-Table-Box">
              <table class="table-Box">
                  <tr class="table-Tr">
                    <th class="table-Th">
                      <div class="table-title">目录名称：</div>
                    </th>
                    <td class="table-Td">
                      <div class="table-Lisdata">
                        <span class="table-Lisdata-span">农机购情况</span>
                      </div>
                    </td>
                    <th class="table-Th">
                      <div class="table-title">开放类型:</div>
                    </th>
                    <td class="table-Td">
                      <div class="table-Lisdata">
                        <span class="table-Lisdata-span">普遍开放</span>
                      </div>
                    </td>
                  </tr>
                <tr class="table-Tr">
                  <th class="table-Th">
                    <div class="table-title">所属系统：</div>
                  </th>
                  <td class="table-Td">
                    <div class="table-Lisdata">
                      <span class="table-Lisdata-span">集团项目管理</span>
                    </div>
                  </td>
                  <th class="table-Th">
                    <div class="table-title">联系方式:</div>
                  </th>
                  <td class="table-Td">
                    <div class="table-Lisdata">
                      <span class="table-Lisdata-span">130555522555</span>
                    </div>
                  </td>
                </tr>
                <tr class="table-Tr">
                  <th class="table-Th">
                    <div class="table-title">资源标签：</div>
                  </th>
                  <td class="table-Td">
                    <div class="table-Lisdata">
                      <span class="table-Lisdata-span">工程建设领域</span>
                    </div>
                  </td>
                  <th class="table-Th">
                    <div class="table-title">所属单位:</div>
                  </th>
                  <td class="table-Td">
                    <div class="table-Lisdata">
                      <span class="table-Lisdata-span">工程公司</span>
                    </div>
                  </td>
                </tr>
                <tr class="table-Tr">
                  <th class="table-Th">
                    <div class="table-title">简介</div>
                  </th>
                  <td colspan="3" class="table-Td">
                    <div class="table-Lisdata">
                      <span class="table-Lisdata-span">
                        该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。该地方简介内容。
                      </span>
                    </div>
                  </td>
                </tr>
              </table>
          </div>

css：

.first-Table-Box{
      .table-Box{
        width:100%;
        table-layout: fixed;
        .table-Tr{
          font-size: 14px;
          .table-Td{
            border-bottom: 1px solid #ececed;
            text-align: left;
            border-top: 1px solid #ececed;
            .table-Lisdata{
              padding: 0 16px 0 12px;
              .table-Lisdata-span{
                padding-top: 15px!important;
                padding-bottom: 15px!important;
                color: #404348;
                display: block;
                padding-top: 8px;
                padding-bottom: 6px;
                min-height: 30px;
                word-break: break-all;
              }
            }
          }
          .table-Th{
            width: 160px;
            text-align: right;
            border-bottom: 1px solid #ececed;
            border-top: 1px solid #ececed;
            background-color: #f7f8f9;
            .table-title{
              padding: 15px 16px !important;
              color: #65686d;
              line-height: 18px;

            }
          }
        }

      }
    }