每行具有重复标题的响应HTML表

我正在处理一个HTML数据表，我希望它在桌面和移动设备上以重复的标题显示。我怎样才能做到这一点

要求：

在桌面上

ID | Name | Age
_______________
1  | Jake | 23
2  | Dave | 45

移动电话

ID   | 1
Name | Jake
Age  | 23 
_______________
ID   | 2
Name | Dave
Age  | 45 

我的表格代码：

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Jake</td>
            <td>23</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Dave</td>
            <td>45</td>
        </tr>
    </tbody>
</table>

身份证件
名称
年龄
1.
满意的
23
2.
戴夫
45

有几种可用模式，包括这个简单的、仅限于CSS的模式：

数据标签

属性：

首先，我们将为每个数据单元添加一个

数据标签

属性，该属性的值表示该列的名称。将用于响应布局中的标签目的。
在较小的视口中，

和

元素将显示为块级别，而不是表格行和单元格。而

：：before

伪类现在用作标签

正文{
字体系列：“开放式Sans”，无衬线；
线高：1.25；
}
桌子{
边框：1px实心#ccc；
边界塌陷：塌陷；
保证金：0；
填充：0；
宽度：100%；
表布局：固定；
}
表格标题{
字号：1.5em；
边缘：.5em 0.75em；
}
表tr{
背景色：#F8；
边框：1px实心#ddd；
填充：.35em；
}
表th，
表td{
填充：625em；
文本对齐：居中；
}
表th{
字体大小：.85em；
字母间距：.1米；
文本转换：大写；
}
@媒体屏幕和屏幕（最大宽度：600px）{
桌子{
边界：0；
}
表格标题{
字体大小：1.3em；
}
餐桌{
边界：无；
剪辑：rect（0）；
高度：1px；
保证金：-1px；
溢出：隐藏；
填充：0；
位置：绝对位置；
宽度：1px；
}
表tr{
边框底部：3px实心#ddd；
显示：块；
边缘底部：.625em；
}
表td{
边框底部：1px实心#ddd；
显示：块；
字体大小：.8em；
文本对齐：右对齐；
}
表td：：之前{
/*
*aria标签没有任何优势，它不会在表中读取
内容：attr（aria标签）；
*/
内容：attr（数据标签）；
浮动：左；
字体大小：粗体；
文本转换：大写；
}
表td：最后一个孩子{
边界底部：0；
}
}

身份证件
名称
年龄
1.
满意的
23
2.
戴夫
45

数据表在响应式设计中表现不佳不幸的是，您需要努力使用CSS

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
<tbody>
  <tr>
      <td>1</td>
      <td>Jake</td>
      <td>23</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Dave</td>
      <td>45</td>
  </tr>
</tbody>
</table>

针对您需要的媒体查询-特别感谢

---

不是十全十美的，我们的想法是，你可以用它来解决你的需求。请访问

您可以参考bootstrap responsive Styleing了解解决方案我在那里找不到确切的解决方案。我认为您必须编写不同的html代码：

/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}
/* Zebra striping */
tr:nth-of-type(odd) { 
  background: #eee; 
}
th { 
  background: #333; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr { 
    display: block; 
}

/* Hide table headers (but not display: none;, for accessibility) */
thead tr { 
    position: absolute;
    top: -9999px;
    left: -9999px;
}

tr { border: 1px solid #ccc; }

td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding-left: 50%; 
}

td:before { 
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%; 
    padding-right: 10px; 
    white-space: nowrap;
}

/*
Label the data
*/
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"; }
td:nth-of-type(3):before { content: "Job Title"; }
td:nth-of-type(4):before { content: "Favorite Color"; }
td:nth-of-type(5):before { content: "Wars of Trek?"; }
td:nth-of-type(6):before { content: "Secret Alias"; }
td:nth-of-type(7):before { content: "Date of Birth"; }
td:nth-of-type(8):before { content: "Dream Vacation City"; }
td:nth-of-type(9):before { content: "GPA"; }
td:nth-of-type(10):before { content: "Arbitrary Data"; }
}