Css 带标题的响应列表

我正在尝试创建一个响应列表，但我也希望在每个列中包含相关的标题

目前使用CSS时：

@media all and (max-width:500px){
   table{
      width:100%;
   }

   td{
      display:block;
      width:100%;
   }

   tr{
      display:block;
      margin-bottom:30px;
   }
}

我知道这是怎么解决的

然而，我的THAD中的th的完整“行”仍显示为正常行，我希望它也按列拆分

---

我有什么办法可以做到这一点吗？

你还没有定义任何css。你是说这个吗？嗨，AleshaOleg，我的意思是。但我的问题是，我有一个表，其中一行表示不同的列标题，因此理想情况下，我希望将标题+整个列作为一个整体。这有意义吗？更糟糕的情况是，我必须在正文中加入一个新行，即标题行？@carlostrecillas你能显示你的代码吗？@AleshaOleg在你发送的示例中，每个标题1、标题2、标题3、标题4都不随其对应的列移动，并且它的折叠方式不是我想要的。我将粘贴一些代码以显示我所拥有的内容。你没有定义任何css。你是说这个吗？嗨，AleshaOleg，我的意思是。但我的问题是，我有一个表，其中一行表示不同的列标题，因此理想情况下，我希望将标题+整个列作为一个整体。这有意义吗？更糟糕的情况是，我必须在正文中加入一个新行，即标题行？@carlostrecillas你能显示你的代码吗？@AleshaOleg在你发送的示例中，每个标题1、标题2、标题3、标题4都不随其对应的列移动，并且它的折叠方式不是我想要的。我将粘贴一些代码以显示我所拥有的