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;
    }
  }
}
相关推荐
熊的猫7 分钟前
webpack 核心模块 — loader & plugins
前端·javascript·chrome·webpack·前端框架·node.js·ecmascript
速盾cdn14 分钟前
速盾:vue的cdn是干嘛的?
服务器·前端·网络
四喜花露水1 小时前
Vue 自定义icon组件封装SVG图标
前端·javascript·vue.js
前端Hardy1 小时前
HTML&CSS: 实现可爱的冰墩墩
前端·javascript·css·html·css3
web Rookie1 小时前
JS类型检测大全:从零基础到高级应用
开发语言·前端·javascript
Au_ust2 小时前
css:基础
前端·css
帅帅哥的兜兜2 小时前
css基础:底部固定,导航栏浮动在顶部
前端·css·css3
工业甲酰苯胺2 小时前
C# 单例模式的多种实现
javascript·单例模式·c#
yi碗汤园2 小时前
【一文了解】C#基础-集合
开发语言·前端·unity·c#
就是个名称2 小时前
购物车-多元素组合动画css
前端·css