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;
    }
  }
}
相关推荐
微信开发api-视频号协议30 分钟前
企业微信外部群开发自动化实践过程
java·前端·微信·自动化·企业微信·ipad
甲维斯35 分钟前
Fable5:20美金的顶级设计师!
前端·人工智能
kyriewen1 小时前
我同时用了 Claude Code、Cursor 和 Codex,说说三个工具的真实差距——2026 年选错工具比不用 AI 更浪费时间
前端·ai编程·claude
Jackson__1 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
闲猫1 小时前
Python FastAPI + SQLAlchemy 入门教程:从零搭建你的第一个 Web 应用
前端·python·fastapi
林小帅2 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端
IT_陈寒2 小时前
React的setState竟然不是立刻生效的,害我调试半天
前端·人工智能·后端
简简单单就是我_hehe2 小时前
前端埋点日志解决方案:完整 User-Agent 解析工具实现,爬虫识别、设备品牌、操作系统、浏览器版本全解析(附完整源码)
前端·爬虫
William_Xu3 小时前
Vue 2 与 Vue 3 生命周期对比
前端
Hilaku3 小时前
为什么你的大文件断点续传,一遇到弱网就崩溃?
前端·javascript·程序员