常用TABLE表格,包含CSS样式 

  1 <style>
  2     /* 全局重置与基础设置 */
  3     * {
  4         margin: 0;
  5         padding: 0;
  6         box-sizing: border-box;
  7     }
  8     body {
  9         font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 10         background-color: #020202;
 11         display: flex;
 12         justify-content: center;
 13         padding: 50px 15px;
 14     }
 15 
 16     /* 表格容器 */
 17     .table-container {
 18         width: 100%;
 19         max-width: 1024px;
 20         background: #fff;
 21         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 22         border-radius: 8px;
 23         overflow: hidden;
 24     }
 25 
 26     /* 表格主体样式 */
 27     table {
 28         width: 100%;
 29         border-collapse: collapse;
 30         table-layout: fixed;
 31         font-size: 14px;
 32         color: #333;
 33     }
 34 
 35     /* 表格标题 */
 36     table caption {
 37         caption-side: top;
 38         font-size: 18px;
 39         font-weight: bold;
 40         padding: 16px 20px;
 41         color: #2c3e50;
 42         background-color: #fff;
 43         text-align: center;
 44         border-bottom: 1px solid #eee;
 45     }
 46     
 47     /* 单元格通用样式 */
 48     table th,
 49     table td {
 50         padding: 12px 10px;
 51         border: 1px solid #9E9E9E;
 52         vertical-align: middle;
 53         text-align: center;
 54     }
 55     
 56     /* 表头样式 */
 57     table thead th {
 58         background-color: #2196F3;
 59         color: #FFF;
 60         font-weight: 600;
 61         padding: 13px 10px;
 62         text-align: center;
 63         letter-spacing: 0.5px;
 64     }
 65 
 66     /* 固定列底色区分 */
 67     table tbody tr td:nth-child(1) {
 68         color: #FFF;
 69         background-color: #6E6E6E;
 70     }
 71     table tbody tr td:nth-child(2) {
 72         color: #FFF;
 73         background-color: #7E7E7E;
 74     }
 75 
 76     /* 对齐工具类 */
 77     .text-right {
 78         text-align: right;
 79         font-family: "Consolas", "Monaco", monospace;
 80     }
 81     .text-left {
 82         text-align: left;
 83         font-family: "Consolas", "Monaco", monospace;
 84     }
 85     /* 上下标美化 */
 86     sub, sup {
 87         font-size: 0.75em;
 88         font-weight: normal;
 89         line-height: 0;
 90         position: relative;
 91         vertical-align: baseline;
 92     }
 93     sup { top: -0.5em; }
 94     sub { bottom: -0.25em; }
 95     
 96     /* 偶数行斑马纹,优先级低于固定列底色 */
 97     table tbody tr:nth-child(even) td:not(:nth-child(1)):not(:nth-child(2)):not(.rowspan-cell) {
 98         background-color: #C9C9C9;
 99     }
100     
101     /* 悬浮效果，最高优先级 */
102     table tbody tr:hover td {
103         background-color: #bb945a !important;
104         color: #000 !important;
105         transition: background-color 0.2s ease;
106         cursor: default;
107     }
108 
109     /* 纵向合并单元格样式 */
110     .rowspan-cell {
111         vertical-align: middle;
112         color: #FFF;
113         background-color: #009688 !important;
114         font-weight: 500;
115     }
116     
117     /* 横向合并单元格样式 */
118     .colspan-cell {
119         vertical-align: middle;
120         color: #FFF;
121         background-color: #009688 !important;
122         font-weight: 500;
123     }
124     
125     /* 表尾合计栏 */
126     table tfoot td {
127         background-color: #f9fafb;
128         font-weight: bold;
129         color: #444;
130         border-top: 2px solid #9E9E9E;
131         border-bottom: 1px solid #9E9E9E;
132     }
133 
134     /* 移动端适配 */
135     @media screen and (max-width:768px) {
136         table {
137             font-size: 12px;
138         }
139         table th,
140         table td {
141             padding: 10px 5px;
142         }
143         table caption {
144             font-size: 16px;
145         }
146     }
147 </style>
148 </head>
149 <body>
150 <div class="table-container">
151     <table>
152         <caption>2026年度物资采购统计表</caption>
153         <colgroup>
154             <col span="2">
155             <col>
156             <col style="background: yellow;">
157             <col>
158             <col style="background: red;">
159         </colgroup>
160         <thead>
161             <tr>
162                 <th>ID</th>
163                 <th>项目(O<sub>2</sub>)</th>
164                 <th>单位(m<sup>3</sup>)</th>
165                 <th>单价 (CNY)</th>
166                 <th>数量</th>
167                 <th>金额 (CNY)</th>
168                 <th>备注</th>
169             </tr>
170         </thead>
171         <tbody>
172             <tr>
173                 <td>1</td>
174                 <td class="text-left">文字描述 A</td>  
175                 <td>吨</td>
176                 <td class="text-right">8,888.00</td>
177                 <td>4</td>
178                 <td class="text-right">35,552.00</td>
179                 <td rowspan="3" class="rowspan-cell">列合并展示(Rowspan)</td>
180             </tr>
181             <tr>
182                 <td>2</td>
183                 <td class="text-left">文字描述 B</td>
184                 <td>吨</td>
185                 <td class="text-right">9,888.00</td>
186                 <td>89</td>
187                 <td class="text-right">880,032.00</td>
188             </tr>
189             <tr>
190                 <td>3</td>
191                 <td class="text-left">文字描述 C</td>
192                 <td>吨</td>
193                 <td class="text-right">2,888.00</td>
194                 <td>888,888</td>
195                 <td class="text-right">2,567,108,544.00</td>
196             </tr>
197         </tbody>
198         <tfoot>
199             <tr>
200                 <td>合计</td>
201                 <td colspan="3" class="colspan-cell">行合并展示 (Colspan)</td>
202                 <td>总数量</td>
203                 <td class="text-right">2,567,989,128.00</td>
204                 <td>描述</td>
205             </tr>
206         </tfoot>
207     </table>
208 </div>
209 </body>
View Code

 

posted @ 2026-08-09 17:21  钢锅  阅读(6)  评论(0)    收藏  举报