固定轉換表來響應移動

網址爲http://action.news 有一個固定的寬度表3列）固定轉換表來響應移動

（我刪除加載按需腳本），使事情變得更容易。千恩萬謝

我做了什麼：添加以下

https://gist.github.com/hkirsman/3002480

這段代碼添加了這個每個谷歌指示

<meta name=viewport content="width=device-width, initial-scale=1">

我已閱讀HTML table with auto-fit for some columns, fixed width for others

，但仍然無法讓頁面移動友好，頂部似乎重新調整

來源

2017-10-10 youtube-dl fan

是否有可能使用div或列表而不是表來顯示內容？表格很難做出響應 – Laura

我發現在Codepen這個例子，所以你可以嘗試它，把它調整到您的需要：

下面是一些代碼

HTML：

<table class="js-table participants-table"> 
    <caption> 
    <p>Responsive Table</p> 
    </caption> 
    <thead> 
    <tr> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Gender</th> 
     <th>Picture</th> 
    </tr> 
    </thead> 
    <tbody> 
    <!--filled from javascript--> 
    </tbody> 
</table>

CSS：

HTML { 
    font-size: 100%; 
    line-height: 1.5; 
    font-family: 'Raleway', sans-serif; 
} 

BODY { 
    margin: 0; 
} 

*, *:before, *:after { 
    box-sizing: border-box; 
} 

IMG { 
    max-width: 100%; 
} 


/*Style For Table*/ 

.participants-table { 
    table-layout: fixed; 
    border-collapse: collapse; 
    margin: 0 auto; 
    width: 90%; 
} 

.participants-table TD, 
.participants-table TH { 
    border: 1px solid #b4adad; 
} 

.participants-table IMG { 
    width: 150px; 
} 

.participants-table THEAD { 
    display: none; 
} 

.participants-table TD { 
    display: block; 
    position: relative; 
    overflow-x: hidden; 
    text-overflow: ellipsis; 
} 


@media only screen and (min-width: 450px) { 
    .participants-table { 
    width: auto; 
    } 
    .participants-table TD, 
    .participants-table TH { 
    padding: .2em 1em; 
    } 
    .participants-table THEAD { 
    display: table-header-group; 
    } 
    .participants-table TD { 
    display: table-cell; 
    position: static; 
    } 
    .participants-table TD:before { 
    display: none; 
    } 
}

link to the example

來源

2017-10-10 08:09:36 Krusader

固定轉換表來響應移動

回答

相關問題