html写一个table表

HTML代码:

html 复制代码
          <div class="table_box w-full">
            <div class="title_top">XX表</div>
            <div class="title_btm">(
              <input class="input input_1" type="text">
              xxxx)
            </div>
            <table class="table w-full">
              <thead>
                <tr>
                  <td style="width: 50%;" colspan="5">
                    时间:
                    <input class="input input_2" type="text" maxlength="4">
                    年
                    <input class="input input_3" type="text" maxlength="2">
                    月
                    <input class="input input_4" type="text" maxlength="2">
                    日 星期
                    <input class="input input_5" type="text" maxlength="1">
                  </td>
                  <td style="width: 50%;" colspan="5">
                    <div class="w-full flex items-center">
                      <div class="w-1/2  flex items-center">
                        地点:
                        <input class="input input_6" type="text">
                      </div>
                      <div class="w-1/2  flex items-center">
                        方式:
                        <input class="input input_6" type="text">
                      </div>
                    </div>
                  </td>
                </tr>
                <tr style="position: relative">
                  <td style="width: 100%;" colspan="10">
                    <br /><br />
                    评审人:<input class="input input_7" type="text">
                    <br /><br /><br />
                    参加人员:<input class="input input_8" type="text">
                    <br /><br /><br />
                  </td>
                  <div
                    style="position: absolute;bottom: 0;right: 0;display: flex;align-items: center;cursor: pointer;padding: 2px;font-size: 12px;">
                    + 新增建议</div>
                </tr>
                <tr>
                  <td colspan="1" class="text-center">
                    序号
                  </td>
                  <td colspan="4" class="text-center">
                    建议
                  </td>
                  <td colspan="5" class="text-center">
                    修改意见
                  </td>
                </tr>

                <!-- 序号 -->
                <tr>
                  <td colspan="1" class="text-center">
                    1
                  </td>
                  <td colspan="4" class="text-center">
                    <input class="input input_9" type="text">
                  </td>
                  <td colspan="5" class="text-center">
                    <input class="input input_9" type="text">
                  </td>
                </tr>
                <tr>
                  <td colspan="1" class="text-center">
                    2
                  </td>
                  <td colspan="4" class="text-center">
                    <input class="input input_9" type="text">
                  </td>
                  <td colspan="5" class="text-center">
                    <input class="input input_9" type="text">
                  </td>
                </tr>
                <tr>
                  <td colspan="1" class="text-center">
                    3
                  </td>
                  <td colspan="4" class="text-center">
                    <input class="input input_9" type="text">
                  </td>
                  <td colspan="5" class="text-center">
                    <input class="input input_9" type="text">
                  </td>
                </tr>
                <tr>
                  <td style="width: 100%;" colspan="10">
                    <div class="flex flex-col flex-grow w-full">
                      <div>意见: </div>
                      <textarea class="input input_10" rows="6" cols="50"></textarea>
                    </div>
                    <div class="flex items-center justify-end mt-4">
                     签字/日期:
                      <input class="input input_11" type="text">
                    </div>
                  </td>
                </tr>
              </thead>
            </table>
            <div style="width: 95%;display: flex;margin:8px auto;line-height: 22px;">
              <div>注:</div>
              <div style="display: flex;flex-flow: column">
                <div>1.xxxxxxxxxxxxxxx。</div>
                <div>2.xxxxxxxxxxxxxxx。</div>
              </div>

            </div>
          </div>

CSS代码:

css 复制代码
.table_box {
  width: 100%;
  font-family: '宋体' !important;
  color: #000 !important;

  .input {
    outline: none;
    border: 0;
    border-bottom: 1px solid #000;
    color: #000;
  }

  .input_1 {
    font-size: 20px;
    text-align: center;
    width: 250px;
  }

  .input_2 {
    font-size: 14px;
    text-align: center;
    width: 40px;
  }

  .input_3 {
    font-size: 14px;
    text-align: center;
    width: 30px;
  }

  .input_4 {
    font-size: 14px;
    text-align: center;
    width: 30px;
  }

  .input_5 {
    font-size: 14px;
    text-align: center;
    width: 30px;
  }

  .input_6 {
    font-size: 14px;
    text-align: center;
    width: 100px;
    border: 0;
  }

  .input_7 {
    font-size: 14px;
    text-align: left;
    width: 612px;
    border: 0;
  }

  .input_8 {
    font-size: 14px;
    text-align: left;
    width: 500px;
    border: 0;
  }

  .input_9 {
    font-size: 14px;
    text-align: center;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .input_10 {
    width: 100%;
    font-size: 14px;
    // text-align: center;
    width: 100%;
    border: 0px solid #000;
    margin-top: 10px;
    resize: none;
  }

  .input_11 {
    font-size: 14px;
    text-align: left;
    width: 250px;
    border: 0px solid #000;
  }



  .title_top,
  .title_btm {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }

  .title_top {
    font-size: 25px;
  }

  .title_btm {
    font-size: 20px;
    margin: 15px 0;
  }

  .table {
    width: 100%;
    border-collapse: collapse;

    .text-center {
      text-align: center !important;
    }

    th,
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  }
}
相关推荐
子兮曰4 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
子兮曰4 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
前端小万4 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
爱勇宝4 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)
三十而立洋4 天前
Cookie 详解:从产生到安全,一次讲透
前端·javascript
卡布鲁4 天前
把一个 Vite + Vue3 应用塞进 qiankun (React + Umi3) 主站:十个坑的复盘
前端·javascript·react.js
李少兄4 天前
JavaScript 隐式全局变量解析
javascript
汉堡大王95274 天前
Jev:不是聊天机器人, 而是一个智能 if 语句
前端·人工智能·后端
梦想很大很大4 天前
从运行事实到回归证据:Workrun 的 Telemetry 与 Evaluation 实践
前端·人工智能·后端
计算机魔术师4 天前
Meta Muse agent 接入 Shopify 的 Shop Pay 实现代理式购物
前端