1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 </head>
8 <style type="text/css">
9 * {
10 margin: 0;
11 padding: 0;
12 }
13
14 table {
15 border: 1px solid #ccc;
16 border-collapse: collapse;
17 width: 800px;
18 position: absolute;
19 bottom: 0;
20 right: 0;
21 left: 0;
22 top: 0;
23 margin: auto;
24 }
25
26 td {
27 border: 1px solid #ccc;
28 }
29
30 td:first-child {
31 width: 110px;
32 }
33
34 td:last-child label {
35 width: 110px;
36 }
37
38 label {
39 display: inline-block;
40 padding: 10px;
41 }
42 </style>
43
44 <body>
45 <table>
46 <tr>
47 <td rowspan="2">
48 <label>
49 <input type="checkbox"> 接口调试
50 </label>
51 </td>
52 <td>
53 <label>
54 <input type="checkbox"> 接口调试
55 </label>
56 </td>
57 <td>
58 <label>
59 <input type="checkbox"> 接口调试
60 </label>
61 <label>
62 <input type="checkbox"> 接口调试
63 </label>
64 <label>
65 <input type="checkbox"> 接口调试
66 </label>
67 <label>
68 <input type="checkbox"> 接口调试
69 </label>
70 <label>
71 <input type="checkbox"> 接口调试
72 </label>
73 <label>
74 <input type="checkbox"> 接口调试
75 </label>
76 <label>
77 <input type="checkbox"> 接口调试
78 </label>
79 <label>
80 <input type="checkbox"> 接口调试
81 </label>
82 <label>
83 <input type="checkbox"> 接口调试
84 </label>
85 </td>
86 </tr>
87 <tr>
88 <td>
89 <label>
90 <input type="checkbox"> 接口调试
91 </label>
92 </td>
93 <td>
94 <label>
95 <input type="checkbox"> 接口调试
96 </label>
97 </td>
98 </tr>
99 <tr>
100 <td rowspan="2">
101 <label>
102 <input type="checkbox"> 接口调试
103 </label>
104 </td>
105 <td>
106 <label>
107 <input type="checkbox"> 接口调试
108 </label>
109 </td>
110 <td>
111 <label>
112 <input type="checkbox"> 接口调试
113 </label>
114 </td>
115 </tr>
116 <tr>
117 <td>
118 <label>
119 <input type="checkbox"> 接口调试
120 </label>
121 </td>
122 <td>
123 <label>
124 <input type="checkbox"> 接口调试
125 </label>
126 <label>
127 <input type="checkbox"> 接口调试
128 </label>
129 <label>
130 <input type="checkbox"> 接口调试
131 </label>
132 <label>
133 <input type="checkbox"> 接口调试
134 </label>
135 <label>
136 <input type="checkbox"> 接口调试
137 </label>
138 </td>
139 </tr>
140 <tr>
141 <td rowspan="3">
142 <label>
143 <input type="checkbox"> 接口调试
144 </label>
145 </td>
146 <td>
147 <label>
148 <input type="checkbox"> 接口调试
149 </label>
150 </td>
151 <td>
152 <label>
153 <input type="checkbox"> 接口调试
154 </label>
155 </td>
156 </tr>
157 <tr>
158 <td>
159 <label>
160 <input type="checkbox"> 接口调试
161 </label>
162 </td>
163 <td>
164 <label>
165 <input type="checkbox"> 接口调试
166 </label>
167 <label>
168 <input type="checkbox"> 接口调试
169 </label>
170 <label>
171 <input type="checkbox"> 接口调试
172 </label>
173 <label>
174 <input type="checkbox"> 接口调试
175 </label>
176 <label>
177 <input type="checkbox"> 接口调试
178 </label>
179 </td>
180 </tr>
181 <tr>
182 <td>
183 <label>
184 <input type="checkbox"> 接口调试
185 </label>
186 </td>
187 <td>
188 <label>
189 <input type="checkbox"> 接口调试
190 </label>
191 <label>
192 <input type="checkbox"> 接口调试
193 </label>
194 <label>
195 <input type="checkbox"> 接口调试
196 </label>
197 <label>
198 <input type="checkbox"> 接口调试
199 </label>
200 <label>
201 <input type="checkbox"> 接口调试
202 </label>
203 </td>
204 </tr>
205 </table>
206 </body>
207
208 </html>
后台让我实现的一个奇葩效果，左中右是分别的区块，现在只是在效果上实现了，如果是渲染数据的话，估计后台所谓的循环套循环是不容易实现的，只能自己处理数据了，值得秦兴的是，后台提的需求，我还是实现了，虽然现在看起来代码很简单，但是自己尝试了很多方法才知道这种最终的形式。
时间： 2024-10-15 03:32:35