使用table实现纸质表格

最新推荐文章于 2024-07-25 11:52:08 发布

Rich_1i3ha

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量146

点赞数

分类专栏：笔记文章标签： css3 html

本文链接：https://blog.csdn.net/qq_41555989/article/details/123373395

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格样式</title>
  <style>
    table {
      border-collapse: collapse;
      width: 756px;
      font-family: SimSun;
      font-size: 12px;
    }
    table, tr, td {
      border: 1px solid #666;
    }
    td {
      height: 28px;
    }
  </style>
</head>
<body>
  <table cellspacing="0" cellpadding="3">
    <caption>XX费用（申请）</caption>
    <colgroup>
      <col width="34%">
      <col width="16%">
      <col width="16%">
      <col width="34%">
    </colgroup>
    <tbody>
      <tr>
        <td colspan="2">省份：</td>
        <td colspan="2">申请部门：</td>
      </tr>
      <tr>
        <td colspan="2">申请客户：</td>
        <td colspan="2">
          <div style="float: left;width: 50%;">申请人：</div>
          <div style="float: left;width: 50%;">岗位：</div>
        </td>
      </tr>
      <tr>
        <td colspan="2">门店名称：</td>
        <td colspan="2">申请日期：</td>
      </tr>
      <tr>
        <td colspan="4">
          <pre>
货架
共计   组、占用   组，位置   ， 占比
粉架   组、占用   组、位置；
液架   组、占用   组、位置；
精架   组、占用   组、位置；
皂架   组、占用   组、位置；
堆头
共计   个、占用   个、位置    ， 占比
          </pre>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          分销：进店条码     、洗衣粉     、洗衣液    、洗洁精      、洗衣皂     、小品类    
        </td>
      </tr>
      <tr>
        <td>陈列费用</td>
        <td colspan="2">申请生效日期</td>
        <td>结束日期</td>
      </tr>
      <tr>
        <td></td>
        <td colspan="2"></td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4">申请说明：
          <div style="height: 50px;"></div>
        </td>
      </tr>
      <tr>
        <td colspan="2">【审核】
          <div style="height: 50px;"></div>
          <div style="display: flex;">
            <div style="width: 50%;">签名：</div>
            <div style="width: 50%;">日期：</div>
          </div>
        </td>
        <td colspan="2">【审核】
          <div style="height: 50px;"></div>
          <div style="display: flex;">
            <div style="width: 50%;">签名：</div>
            <div style="width: 50%;">日期：</div>
          </div>
        </td>
      </tr>
      <tr>
        <td colspan="4">【审核】
          <div style="height: 50px;"></div>
          <div style="display: flex;">
            <div style="width: 50%;">签名：</div>
            <div style="width: 50%;">日期：</div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

表格之间的拼接：margin-top: -1px;
表格数据回填：用类名选择回填对应的数据

tableDom.find('.' + key).eq(index).text(dataText)

Rich_1i3ha

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用table实现纸质表格

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格样式</t.
复制链接

扫一扫

专栏目录