响应式表格布局建议

Question

有没有一种简单的方法可以将网站上基于表格的布局转换为响应式设计，而无需在我的代码中设置每行和单元格的宽度和高度

Answer 1

如果您有固定数量的列而不是我为您提供的一种解决方案， 下面的示例代码和屏幕。

桌面屏幕 [![在此处输入图片描述][1]][1]

手机屏幕（宽度

[![在此处输入图片描述][2]][2]

屏幕上方的 HTML 代码

<table>
         <thead>
            <tr>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Phone Number</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Anil</td>
               <td>Kumar</td>
               <td>+91 9022669735</td>
            </tr>
            <tr>
               <td>Sunil</td>
               <td>Kumar</td>
               <td>+91 9405889360</td>
            </tr>
         </tbody>
      </table>

样式

table { 
             width: 100%; 
             border-collapse: collapse; 
         }
         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;
             }
             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: "Phone Number"; }
         }

希望对您有所帮助