你好,我怎样才能创建一个像这样的网格只使用HTML和CSS?谢谢你的帮助。
62lalag41#
你可以!你需要一个表标签...然后是表头然后是表体最后是表尾TR标签是表的行Td和th是单元格唯一的区别是th使文本比td标签更粗然后最后用css样式如果你想用网格创建它,我会很快回答你只要改变颜色...
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <style type="text/css"> table { width: 100%; border: 3px solid; border-collapse: collapse; } table tr { height: 30px; } table tr td:not(:nth-child(1)), table tr th:not(:nth-child(1)) { text-align: right; } table thead tr { background: gray; /*COLOR FOR HEAD */ } table tbody tr:nth-child(even) { background: ghostwhite; /*COLOR FOR EVEN ROWS */ } table tbody tr:nth-child(odd) { background: lightgray; /*COLOR FOR ODD ROWS */ } table tfoot tr { background: gray; /*COLOR FOR FOOT */ } </style> <table> <thead> <tr> <th></th> <th>COUNT</th> <th>MINUTES</th> <th>TOTAL MINUTES</th> </tr> </thead> <tbody> <tr> <td>Direct Assignment Position</td> <td>18</td> <td>240.00</td> <td>4320.00</td> </tr> <tr> <td>Indirect Assignment Position</td> <td>29</td> <td>24.00</td> <td>696.00</td> </tr> <tr> <td>Establishments</td> <td>17</td> <td>29.00</td> <td>493.00</td> </tr> <tr> <td>SUBTOTAL</td> <td></td> <td></td> <td>5509.00</td> </tr> <tr> <td>Circuit days of travel</td> <td></td> <td></td> <td>1.25</td> </tr> <tr> <td>Travel Data</td> <td></td> <td></td> <td>600.00</td> </tr> <tfoot> <tr> <td>TOTAL</td> <td></td> <td></td> <td>6109.00</td> </tr> </tfoot> </tbody> </table> </body> </html>
1条答案
按热度按时间62lalag41#
你可以!你需要一个表标签...然后是表头然后是表体最后是表尾TR标签是表的行Td和th是单元格唯一的区别是th使文本比td标签更粗然后最后用css样式如果你想用网格创建它,我会很快回答你只要改变颜色...