表格demo

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
  <title>标题</title>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="description" content="描述" />
  <meta name="keywords" content="关键字" />
  <link rel="icon" href="http://file.ih5.cn/favicon.ico" type="image/x-icon" />
</head>

<body>
  <style>

    html {
      background: #fff;
    }

    .box {
       550px;
      padding-top: 50px;
      margin: 0 auto;
    }

    ul {
      border: 1px solid #ddd;
    }

    ul li {
      display: flex;
      border-bottom: 1px solid #ddd;
    }

    ul li:last-child {
      border-bottom: none;
    }

    ul .item {
      flex: 1;
      height: 100%;
      display: flex;
    }


    ul .item .tit {
      background-color: pink;
      flex-shrink: 0;
       100px;
      /* height: 60px; */
      line-height: 60px;
      font-size: 14px;
      color: #000;
      text-align: center;
      border-right: 1px solid #ddd;
      font-weight: 500;
    }

    ul li .item:nth-child(2) .tit {
      border-left: solid 1px #ddd;
    }

    ul .item .con {
      flex: 1;
      /* line-height: 40px; */
      font-size: 14px;
      color: #666;
      padding-left: 20px;
    }

    .center {
      display: flex;
    }

    .center .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: 1px solid #ddd;
      border-left: 0;
      padding-top: 50px;
    }

    .center .right {
      flex: 4.5;
      border-top: 1px solid #dddddd;
      border-bottom: 1px solid #dddddd;
    }

    .title {
      text-align: center;
      margin: 10px 0;
      font-weight: 700;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>

  <div class="box">
    <p class="title">招标文件流转审核表</p>
    <ul>
      <div class="top">
        <li>
          <div class="item">
            <div class="tit">招标项目</div>
            <div class="con"></div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="tit">主办部门意见</div>
            <div class="con">
              <div>主要评审内容</div>
              <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">主办部门:</span> <span
                  style="flex: 1;">主办部门</span> <span style="flex: 1;">负责人</span> <span style="flex: 1;">
                  日期</span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="tit">招标采购部意见</div>
            <div class="con">
              <div style="margin-top: 50px;display: flex;"><span style="flex: 1;">主办部门:</span> <span
                  style="flex: 1;">主办部门</span> <span style="flex: 1;">负责人</span> <span style="flex: 1;">
                  日期</span>
              </div>
            </div>
          </div>
        </li>
      </div>
      <div class="center">
        <div class="left">
          <div>审</div>
          <div>核</div>
          <div>部</div>
          <div>门</div>
          <div>意</div>
          <div>见</div>
        </div>
        <div class="right">
          <li>
            <div class="item">
              <div class="tit">工程部</div>
              <div class="con">
                <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                    日期</span>
                </div>
              </div>
            </div>

          </li>
          <li>
            <div class="item">
              <div class="tit">总工办</div>
              <div class="con">
                <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                    日期</span>
                </div>
              </div>
            </div>

          </li>
          <li>
            <div class="item">
              <div class="tit">计生部</div>
              <div class="con">
                <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                    日期</span>
                </div>
              </div>
            </div>

          </li>
          <li>
            <div class="item">
              <div class="tit">财务部</div>
              <div class="con">
                <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                    日期</span>
                </div>
              </div>
            </div>

          </li>
          <li>
            <div class="item">
              <div class="tit">综合办</div>
              <div class="con">
                <div style="margin-top: 40px;display: flex;"><span style="flex: 1;">负责人</span> <span style="flex: 1;">
                    日期</span>
                </div>
              </div>
            </div>

          </li>
        </div>
      </div>
      <div>
        <li>
          <div class="item">
            <div class="tit">
              <div>总工程师</div>
              <div>意见</div>
            </div>
            <div class="con">
              <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                  日期</span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="tit">
              <div>纪检领导</div>
              <div>意见</div>
            </div>
            <div class="con">
              <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                  日期</span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="tit">
              <div>(分管副总)</div>
              <div>意见</div>
            </div>
            <div class="con">
              <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                  日期</span>
              </div>
            </div>
          </div>
        </li>
        <li>
          <div class="item">
            <div class="tit">
              <div>(监管)</div>
              <div>总经理</div>
            </div>
            <div class="con">
              <div style="margin-top: 100px;display: flex;"><span style="flex: 1;">签字</span> <span style="flex: 1;">
                  日期</span>
              </div>
            </div>
          </div>
        </li>
      </div>
    </ul>
  </div>
</body>

</html>

 

原文地址:https://www.cnblogs.com/yadi001/p/14836932.html