Question

我有这个样本：

代码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>

我找到了这个例子并想做类似

的事情

sample responsive table

我不明白的是如何编写CSS代码。我需要一个简短的示例代码CSS来使我的表格变得像那样。如果你知道更好的例子来使表格响应，请放在这里

毕竟这是使表格响应的最佳方法吗？

提前致谢！

Answer 1

将此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及更少。

哪个是创建响应表的最佳实践？

1 个答案: