Html 创建响应表的最佳实践是什么？

我有这个样本：

代码HTML:

<table class="table table-striped">
  <thead>
    <tr>
      <td>First Name</td>
      <td>Last Name</td>
      <td>Email</td>
      <td>Phone</td>
      <td>Adresss</td>
      <td>Message</td>
    </tr>  
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Smith</td>
      <td>jhs@yahoo.com</td>
      <td>0766323123</td>
      <td>Test</td>
      <td>Test</td>
    </tr>  
    <tr>
      <td>Ronny</td>
      <td>Stuard</td>
      <td>ros@yahoo.com</td>
      <td>0877223534</td>
      <td>Test2</td>
      <td>Test2</td>
    </tr>  
  </tbody>   
</table> 

名字
姓
电子邮件
电话
地址
消息
约翰
史密斯
jhs@yahoo.com
0766323123
试验
试验
龙尼
思杜德
ros@yahoo.com
0877223534
测试2
测试2

我找到了这个例子，想做一些类似的事情

我不理解的是CSS代码是如何编写的。 我需要一个简短的CSS示例代码来将我的表格变成那边的样子。另外，如果你知道更好的示例来使表格响应，请放在这里

毕竟，这是使桌子响应的最好方法吗

---

提前谢谢

将此css代码用于您的表格：

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

    /* 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";
        text-align: left;
        font-size: 12px;
    }
    td:nth-of-type(2):before { content: "Last Name";
        text-align: left;
        font-size: 12px;
    }
    td:nth-of-type(2):before { content: "Email";
        text-align: left;
        font-size: 12px;
    }
    td:nth-of-type(2):before { content: "Phone";
        text-align: left;
        font-size: 12px;
    }
    td:nth-of-type(2):before { content: "Address";
        text-align: left;
        font-size: 12px;
    }
    td:nth-of-type(2):before { content: "Message";
        text-align: left;
        font-size: 12px;
    }
}

@media (max-width: 500px)
{
    td
    {
        font-size: 12px!important;
        text-align: right!important;
        padding-right: 5px;
    }
}

---

添加屏幕的大小，就像您所给出的示例一样，您希望在响应中转换表。在这种情况下，适用于500px及以下。

。你读了吗？这个问题要么过于宽泛，基于观点，要么需要讨论，因此对于堆栈溢出来说是离题的。如果您有一个具体的、可回答的编程问题，请提供完整的细节。我不理解的是CSS代码是如何编写的。-这是在SO询问反馈时非常重要的一点。我的意思是我需要修改我的示例以了解正在发生的事情。