響應表不顯示列值

Question

當你減少瀏覽器窗口，你會看到一個不同的鋪陳在iPhone屏幕表奠定了.....

我響應表代碼工作正常時，列有值.... 但是當我的敏感表中沒有列富人它沒有顯示相應的列....

提供以下

http://jsfiddle.net/68yA3/

我的代碼

table { 
     width: 100%; 
     border-collapse: collapse; 
    } 
    /* Zebra striping */ 
    tr:nth-of-type(odd) { 
     background: #eee; 
    } 
    th { 
     background: #1a4567; 
     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: static; 
      /* 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: "MFG P/N"; } 
     td:nth-of-type(2):before { content: "MFG Name"; } 
     td:nth-of-type(3):before { content: "Part ID"; } 
     td:nth-of-type(4):before { content: "Description"; } 
     td:nth-of-type(5):before { content: "Cost"; } 
     td:nth-of-type(6):before { content: "Price"; } 
     td:nth-of-type(7):before { content: "On Hand"; } 
     td:nth-of-type(8):before { content: "On Order"; } 
     td:nth-of-type(9):before { content: "Allocated"; } 
     td:nth-of-type(10):before { content: "Shipped"; } 
     td:nth-of-type(11):before { content: "Report"; } 
     td:nth-of-type(12):before { content: "RMA"; } 
     td:nth-of-type(10):before { content: "File"; } 
     td:nth-of-type(10):before { content: "Add Part"; } 
    } 

    /* Smartphones (portrait and landscape) ----------- */ 
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 480px) { 
     body { 
      padding: 0; 
      margin: 0; 
      width: 320px; } 
     } 

    /* iPads (portrait and landscape) ----------- */ 
    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
     body { 
      width: 495px; 
     } 
    } 

Answer 1

這是許多奇怪的HTML表格之一。如果沒有內容放入單元格，只需將內容設置爲 即可。