html表格如何做成响应式,如何制作一个响应式的HTML5表格-CSDN博客

本文介绍了一种使用CSS实现响应式表格的方法，包括为不同屏幕尺寸定制的样式，确保了良好的跨设备阅读体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2004

Hollywood Film Festival (Animation OTY) 　　　　注意代码中的data属性，每一个单元格的data属性都与表格的header相对应。

CSS样式　　表格基本的CSS样式如下：　　table#miyazakicaption{

font-size:2rem;color:#444; 　　margin:1rem; 　　background-image:url(miyazaki.png),url(miyazaki2.png); 　　background-size: contain; 　　background-repeat:no-repeat; 　　background-position:centerleft,centerright; 　　} 　　table#miyazaki {

border-collapse:collapse;

font-family: Agenda-Light;

font-weight:100; 　　background:#333;color:#fff; 　　text-rendering:optimizeLegibility; 　　border-radius:5px; 　　} 　　table#miyazaki thead th {font-weight:600; } 　　table#miyazaki thead th, table#miyazaki tbody td { 　　padding: .8rem;font-size:1.4rem; 　　} 　　table#miyazaki tbody td { 　　padding: .8rem;font-size:1.4rem; 　　color:#444;background:#eee; 　　} 　　table#miyazaki tbody tr:not(:last-child) { 　　border-top:1pxsolid#ddd;

border-bottom:1pxsolid#ddd; 　　} 　　下面是响应式表格的CSS代码：　　@mediascreenand (

max-width:600px) { 　　table#miyazakicaption{background-image:none; } 　　table#miyazaki thead {display:none; } 　　table#miyazaki tbody td {display:block;padding: .6rem; } 　　table#miyazaki tbody tr td:

first-child {background:#333;color:#fff; } 　　table#miyazaki tbody td:before { 　　content:attr(data-th);font-weight:bold; 　　display:inline-block;width:6rem; 　　} 　　} 　　media query代码中隐藏表格的头部单元，并且将每一个单元格的data-th作为标签显示在单元格内容的前面。每一行的第一个单元格都设置了特别的背景色和前景色，使之更为清晰。