CSS響應表不能正常工作

-1

我正在爲響應式css工作。我從這個鏈接http://css-tricks.com/responsive-data-tables/（如何在css上製作響應表）閱讀教程。它在一些示例頁面上工作，但在我的HTML頁面我有一些關於窗口重新調整大小的問題，並且表格沒有正確響應。這裏是我的HTML代碼：CSS響應表不能正常工作

<style> 
     /* 
Generic Styling, for Desktops/Laptops 
*/ 
     table 
     { 
      width: 100%; 
      border-collapse: collapse; 
     } 
     /* Zebra striping */ 
     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; 
     } 
     /* 
Max width before this PARTICULAR table gets nasty 
This query will take effect for any screen smaller than 760px 
and also iPads specifically. 
*/ 
     @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; 
      } 
      /* 
    Label the data 
    */ 
      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: "Job Title"; 
      } 
      td:nth-of-type(4):before 
      { 
       content: "Favorite Color"; 
      } 
      td:nth-of-type(5):before 
      { 
       content: "Wars of Trek?"; 
      } 
      td:nth-of-type(6):before 
      { 
       content: "Porn Name"; 
      } 
      td:nth-of-type(7):before 
      { 
       content: "Date of Birth"; 
      } 
      td:nth-of-type(8):before 
      { 
       content: "Dream Vacation City"; 
      } 
      td:nth-of-type(9):before 
      { 
       content: "GPA"; 
      } 
      td:nth-of-type(10):before 
      { 
       content: "Arbitrary Data"; 
      } 
     } 
    </style> 
    <body> 
     <table> 
      <thead> 
       <tr> 
        <th> 
         First Name 
        </th> 
        <th> 
         Last Name 
        </th> 
        <th> 
         Job Title 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td> 
         James 
        </td> 
        <td> 
         Matman 
        </td> 
        <td> 
         Chief Sandwich Eater 
        </td> 
       </tr> 
       <tr> 
        <td> 
         The 
        </td> 
        <td> 
         Tick 
        </td> 
        <td> 
         Crimefighter Sorta 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </body> 
</html>

它顯示如下圖所示重新大小的窗口上輸出：

enter image description here

，效果不錯的JS-小提琴如下圖所示：

enter image description here

鏈接：http://jsfiddle.net/Cd9Yp/

我的代碼有什麼問題？任何人都可以引導我，謝謝！

來源

2014-02-17 Stack Overflow User

什麼瀏覽器你在測試你的代碼完美地工作之後？我在Chrome和Firefox和IE上測試它工作正常。 –

chrome dude ...！ –

嘗試在指定的視口之間定義min-width。如果需要/需要，可以向父元素table和孩子tr發送。

table { 
    width: 100%; 
    min-width: 320px; // this should do it 
    border-collapse: collapse; 
}

而且。

tr { 
    min-width: 200px; // specify if additionally needed or wanted 
}

什麼分辨率你優化 - 我看你@media是平板電腦，但你的小射擊顯然 - 你不應該需要去下面320px;在大多數情況下，因此，如果您最大限度地減少低於它不該沒關係。

另外，爲什麼不使用嵌套divs？

來源

2014-02-17 08:48:59

試過這不是工作夥伴:( –

更新了我的答案，應該是設置的人 –

這也不是工作夥伴:( –

這是小錯誤，我不指定HTML文檔類型爲HTML5

的頂部它在現有的代碼

<!DOCTYPE html>

來源

2014-02-18 04:35:22

CSS響應表不能正常工作

回答

相關問題