html写一个table表

HTML代码：

1.           <div class="table_box w-full">
2.             <div class="title_top">XX表</div>
3.             <div class="title_btm">(
4.               <input class="input input_1" type="text">
5.               xxxx)
6.             </div>
7.             <table class="table w-full">
8.               <thead>
9.                 <tr>
10.                   <td style="width: 50%;" colspan="5">
11.                     时间：
12.                     <input class="input input_2" type="text" maxlength="4">
13.                     年
14.                     <input class="input input_3" type="text" maxlength="2">
15.                     月
16.                     <input class="input input_4" type="text" maxlength="2">
17.                     日 星期
18.                     <input class="input input_5" type="text" maxlength="1">
19.                   </td>
20.                   <td style="width: 50%;" colspan="5">
21.                     <div class="w-full flex items-center">
22.                       <div class="w-1/2  flex items-center">
23.                         地点：
24.                         <input class="input input_6" type="text">
25.                       </div>
26.                       <div class="w-1/2  flex items-center">
27.                         方式：
28.                         <input class="input input_6" type="text">
29.                       </div>
30.                     </div>
31.                   </td>
32.                 </tr>
33.                 <tr style="position: relative">
34.                   <td style="width: 100%;" colspan="10">
35.                     <br /><br />
36.                     评审人：<input class="input input_7" type="text">
37.                     <br /><br /><br />
38.                     参加人员：<input class="input input_8" type="text">
39.                     <br /><br /><br />
40.                   </td>
41.                   <div
42.                     style="position: absolute;bottom: 0;right: 0;display: flex;align-items: center;cursor: pointer;padding: 2px;font-size: 12px;">
43.                     + 新增建议</div>
44.                 </tr>
45.                 <tr>
46.                   <td colspan="1" class="text-center">
47.                     序号
48.                   </td>
49.                   <td colspan="4" class="text-center">
50.                     建议
51.                   </td>
52.                   <td colspan="5" class="text-center">
53.                     修改意见
54.                   </td>
55.                 </tr>
57.                 <!-- 序号 -->
58.                 <tr>
59.                   <td colspan="1" class="text-center">
60.                     1
61.                   </td>
62.                   <td colspan="4" class="text-center">
63.                     <input class="input input_9" type="text">
64.                   </td>
65.                   <td colspan="5" class="text-center">
66.                     <input class="input input_9" type="text">
67.                   </td>
68.                 </tr>
69.                 <tr>
70.                   <td colspan="1" class="text-center">
71.                     2
72.                   </td>
73.                   <td colspan="4" class="text-center">
74.                     <input class="input input_9" type="text">
75.                   </td>
76.                   <td colspan="5" class="text-center">
77.                     <input class="input input_9" type="text">
78.                   </td>
79.                 </tr>
80.                 <tr>
81.                   <td colspan="1" class="text-center">
82.                     3
83.                   </td>
84.                   <td colspan="4" class="text-center">
85.                     <input class="input input_9" type="text">
86.                   </td>
87.                   <td colspan="5" class="text-center">
88.                     <input class="input input_9" type="text">
89.                   </td>
90.                 </tr>
91.                 <tr>
92.                   <td style="width: 100%;" colspan="10">
93.                     <div class="flex flex-col flex-grow w-full">
94.                       <div>意见： </div>
95.                       <textarea class="input input_10" rows="6" cols="50"></textarea>
96.                     </div>
97.                     <div class="flex items-center justify-end mt-4">
98.                      签字/日期：
99.                       <input class="input input_11" type="text">
100.                     </div>
101.                   </td>
102.                 </tr>
103.               </thead>
104.             </table>
105.             <div style="width: 95%;display: flex;margin:8px auto;line-height: 22px;">
106.               <div>注：</div>
107.               <div style="display: flex;flex-flow: column">
108.                 <div>1.xxxxxxxxxxxxxxx。</div>
109.                 <div>2.xxxxxxxxxxxxxxx。</div>
110.               </div>
112.             </div>
113.           </div>

复制代码

 CSS代码：

1. .table_box {
2.   width: 100%;
3.   font-family: '宋体' !important;
4.   color: #000 !important;
6.   .input {
7.     outline: none;
8.     border: 0;
9.     border-bottom: 1px solid #000;
10.     color: #000;
11.   }
13.   .input_1 {
14.     font-size: 20px;
15.     text-align: center;
16.     width: 250px;
17.   }
19.   .input_2 {
20.     font-size: 14px;
21.     text-align: center;
22.     width: 40px;
23.   }
25.   .input_3 {
26.     font-size: 14px;
27.     text-align: center;
28.     width: 30px;
29.   }
31.   .input_4 {
32.     font-size: 14px;
33.     text-align: center;
34.     width: 30px;
35.   }
37.   .input_5 {
38.     font-size: 14px;
39.     text-align: center;
40.     width: 30px;
41.   }
43.   .input_6 {
44.     font-size: 14px;
45.     text-align: center;
46.     width: 100px;
47.     border: 0;
48.   }
50.   .input_7 {
51.     font-size: 14px;
52.     text-align: left;
53.     width: 612px;
54.     border: 0;
55.   }
57.   .input_8 {
58.     font-size: 14px;
59.     text-align: left;
60.     width: 500px;
61.     border: 0;
62.   }
64.   .input_9 {
65.     font-size: 14px;
66.     text-align: center;
67.     width: 100%;
68.     height: 100%;
69.     border: 0;
70.   }
72.   .input_10 {
73.     width: 100%;
74.     font-size: 14px;
75.     // text-align: center;
76.     width: 100%;
77.     border: 0px solid #000;
78.     margin-top: 10px;
79.     resize: none;
80.   }
82.   .input_11 {
83.     font-size: 14px;
84.     text-align: left;
85.     width: 250px;
86.     border: 0px solid #000;
87.   }
91.   .title_top,
92.   .title_btm {
93.     display: flex;
94.     align-items: center;
95.     justify-content: center;
96.     font-weight: 700;
97.   }
99.   .title_top {
100.     font-size: 25px;
101.   }
103.   .title_btm {
104.     font-size: 20px;
105.     margin: 15px 0;
106.   }
108.   .table {
109.     width: 100%;
110.     border-collapse: collapse;
112.     .text-center {
113.       text-align: center !important;
114.     }
116.     th,
117.     td {
118.       border: 1px solid black;
119.       padding: 8px;
120.       text-align: left;
121.     }
122.   }
123. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。