響應表

Question

我需要響應表的幫助。需要的是基本上在調整大小時將其更改爲「手機版」，但是移動版與主要風格略有不同，如圖所示。

我目前得到這個：http://jsfiddle.net/MLsZ8/

HTML：

<table class="crafting"> 

    <thead> 
    <tr> 
    <th style="width:15%">Name</th> 
    <th style="width:20%">Ingredients</th> 
    <th style="width:205px;">Input &gt; Output</th> 
    <th>Description</th> 
    </tr> 
    </thead> 

    <tbody> 

    <tr> 
    <td>Ore Blocks</td> 
    <td>Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</td> 
    <td><img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /></td> 
    <td>Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</td> 
    </tr> 

    </tbody> 
    </table> 

CSS：

 td { 
     border:0; 
     } 

     table.crafting { 
      border-spacing:0; 
      border-collapse:collapse; 
     } 
     .crafting th { 
      border:2px solid #f3f3f3; 
      padding:5px; 
     } 
     .crafting td { 
      border:2px solid #f3f3f3; 
      padding:5px; 
      vertical-align:top; 
     } 
     .crafting tr { 
      background:#c6c6c6; 
     } 
     .crafting-name { 
      font-weight:bold; 
      border-bottom:0 !important; 
      background:#c6c6c6; 
     } 
     .crafting-ingredients { 
      border-top:0 !important; 
      border-bottom:0 !important; 
      background:#bcbcbc; 
     } 
     .crafting-img { 
      width:205px; 
      border-bottom:0 !important; 
      border-top:0 !important; 
      background:#c6c6c6; 
     } 
     .crafting-desc { 
      border-top:0 !important; 
      background:#bcbcbc; 
     } 

Answer 1

表細胞無法重新安排他們你想要的方式 - 行列被鎖定，不能浮動。你所能做的就是在每個單元格內改變佈局。您將需要完全改變您的標記以實現此目的。

Answer 2

如果你不反對改變HTML的全盤格式化，我有可能會更容易一點處理解決方案...

如果更改當前的表結構的一系列div元素，您可以將每個表格行嵌套到容器div中。

我給你舉個例子一個 「行」：

<div class="tableRow"> 
<div class="columnOne"> content </div> 
<div class="columnTwo"> content </div> 
<div class="columnThree"> content </div> 
<div class="columnFour"> content </div> 
</div> 

然後，使用CSS，你可以設置.tableRow {width: 100%}。從這裏，您可以根據您的需要設置列寬。從你的榜樣，它看起來像你可以做：

.columnOne {width: 10%; float: left;} 
.columnTwo {width: 15%; float: left;} 
.columnThree {width: 30%; float: left;} 
.columnFour {width: 45%; float: left;} 

然後，當你達到你的移動視圖斷點，使用@media query，你可以做到以下幾點：

​​

這將導致列有效地成爲width: 100%的行。

Answer 3

一個簡單的解決方案是有兩個表格：一個常規表格（類別爲full）和一個移動類別（類別爲mobile）。然後，您可以使用媒體查詢在特定的屏幕大小之間切換它們。

如果您的網站不是特別重，這是一個可以節省很多頭痛的方法。

例小提琴：http://jsfiddle.net/QDrPb/

.mobile { 
    display:none; 
} 

@media (max-width:767px) { 
    .full { 
     display:none; 
    } 
    .mobile { 
     display:block; 
    } 
} 

Answer 4

Twitter Bootstrap是一件很好的事，實現表響應。

http://getbootstrap.com/ 

你必須從上面的鏈接下載並添加css文件。

之後，應用這樣的：http://getbootstrap.com/css/#tables-responsive

我希望這可以幫助您的需要。

由於

Answer 5

選項1：

完整表

http://jsfiddle.net/2655u/

選項2

轉換表中所用mediaqueries

HTML到的div

<div class="title"> 
    <div class="name">Name</div> 
    <div class="ingredients">Ingredients</div> 
    <div class="field">Input &gt; Output</div> 
    <div class="description">Description</div> 
</div> 
<div class="responsive"> 
    <div class="name">Ore Blocks</div> 
    <div class="ingredients">Gold Ingots, Iron Ingots, Diamonds and Lapis Lazuli Dye</div> 
    <div class="field"> 
     <img width="204" height="112" title="Crafting Ore Blocks" src="http://www.minecraftxl.com/images/crafting/Crafting-Ore-Blocks1.gif" alt="Crafting Ore Blocs from Ingots" /> 
    </div> 
    <div class="description">Turn ingots or diamonds into a placeable block. Can be used for storage or to show off.</div> 
</div> 

CSS

div { 
    display: table; 
    width: 100%; 
    table-layout: fixed; 
} 
div > div { 
    display: table-cell; 
    background : #C6C6C6; 
    border:2px solid #f3f3f3; 
    padding:5px; 
    vertical-align : top; 
} 
div.title { 
    text-align : center; 
    font-weight:bold; 
} 
div.name { 
    width : 90px; 
} 
div.ingredients { 
    width : 150px; 
} 
div.field { 
    width : 205px; 
} 

@media only screen and (max-width: 767px) { 
    .title {display:none;} 
    .responsive div { 
     display : block; 
     width : auto; 
     text-align : center; 
     background : white; 
    } 
    .responsive div.ingredients {background : #C6C6C6;} 
    .responsive div.description {background : #C6C6C6;} 
} 

例子：http://jsfiddle.net/2DTSG/

Answer 6

嗯，我也尋找同樣的一天。得到以下。它遵循相同的方法，當在較小的設備中查看時將列轉換爲行。

http://css-tricks.com/responsive-data-tables/

向前邁進之前看到Live Demo

Answer 7

在這裏簡單的演示，請reffer此鏈接，純CSS demo fiddle

/*by Ñ££¿ Upadhyay*/ 
 
body { 
 
    font-family: "Open Sans", sans-serif; 
 
    line-height: 1.25; 
 
} 
 
table { 
 
    border: 1px solid #ccc; 
 
    border-collapse: collapse; 
 
    margin: 0; 
 
    padding: 0;a 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
table caption { 
 
    font-size: 18px; 
 
    margin: 10px; 
 
} 
 
table tr { 
 
    background: #f8f8f8; 
 
    border: 1px solid #ddd; 
 
    padding: 10px; 
 
} 
 
table th, 
 
table td { 
 
    padding: 10px; 
 
    text-align: center; 
 
} 
 
table th { 
 
    font-size: 14px; 
 
    letter-spacing: 0; 
 
    text-transform: uppercase; 
 
} 
 
@media screen and (max-width: 600px) { 
 
    table { 
 
    border: 0; 
 
    } 
 
    table caption { 
 
    font-size: 14px; 
 
    } 
 
    table thead { 
 
    border: none; 
 
    clip: rect(0 0 0 0); 
 
    height: 1px; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: absolute; 
 
    width: 1px; 
 
    } 
 
    table tr { 
 
    border-bottom: 3px solid #ddd; 
 
    display: block; 
 
    margin-bottom: 5px; 
 
    } 
 
    table td { 
 
    border-bottom: 1px solid #ddd; 
 
    display: block; 
 
    font-size: 14px; 
 
    text-align: right; 
 
    } 
 
    table td:before { 
 
    /* 
 
    * aria-label has no advantage, it won't be read inside a table 
 
    content: attr(aria-label); 
 
    */ 
 
    content: attr(data-label); 
 
    float: left; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    padding-right: 70px; 
 
    } 
 
    table td:last-child { 
 
    border-bottom: 0; 
 
    } 
 
}

<table> 
 
    <caption>Statement Summary</caption> 
 
    <thead> 
 
    <tr> 
 
     <th scope="col">Account</th> 
 
     <th scope="col">Due Date</th> 
 
     <th scope="col">Amount</th> 
 
     <th scope="col">Period</th> 
 
     <th scope="col">Period</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td data-label="Account">Visa - 3412</td> 
 
     <td data-label="Due Date">04/01/2016</td> 
 
     <td data-label="Amount">$1,190</td> 
 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
 
    </tr> 
 
    <tr> 
 
     <td scope="row" data-label="Account">Visa - 6076</td> 
 
     <td data-label="Due Date">03/01/2016</td> 
 
     <td data-label="Amount">$2,443</td> 
 
     <td data-label="Period">02/01/2016 - 02/29/2016</td> 
 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
 
    </tr> 
 
    <tr> 
 
     <td scope="row" data-label="Account">Corporate AMEX</td> 
 
     <td data-label="Due Date">03/01/2016</td> 
 
     <td data-label="Amount">$1,181</td> 
 
     <td data-label="Period">02/01/2016 - 02/29/2016</td> 
 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
 
    </tr> 
 
    <tr> 
 
     <td scope="row" data-label="Acount">Visa - 3412</td> 
 
     <td data-label="Due Date">02/01/2016</td> 
 
     <td data-label="Amount">$842</td> 
 
     <td data-label="Period">01/01/2016 - 01/31/2016</td> 
 
     <td data-label="Period">03/01/2016 - 03/31/2016</td> 
 
    </tr> 
 
    </tbody> 
 
</table>