Question

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

Answer 1

如果您的固定列数比我有一个解决方案，示例代码和屏幕如下。

桌面屏幕 [！[在此处输入图像说明] [1]] [1]

移动屏幕（宽度<760）

[！[在此处输入图像说明] [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"; }
         }

希望这会帮助你

响应表布局建议

1 个答案: