如何使​​的行爲像divs並忽略<tr> s？

Question

我有一個2行5列的表格。

對於移動優化，我希望<td>的行爲像浮動的div給我2列5行。

爲此目的，我創建：

@media (max-width: 600px) { 
    table td { 
     float: left; 
     width: 50%; 
    } 
} 

這工作，但我仍然得到伊朗式分居其中兩個<tr>相約。而不是5 2列，我得到的6列和4

見琴柱：https://jsfiddle.net/xjzpaudr/20/

會有人知道，如果有一種方法來去除<tr>而不影響其子元素？

Answer 1

嘗試在媒體查詢添加table tr { display: inline; }：

@media (max-width: 600px) { 
    table tr { display: inline; } 
    table td { 
     float: left; 
     width: 50%; 
    } 
} 

https://jsfiddle.net/xjzpaudr/21/

Answer 2

雖然我不能想出一個可行的方法來做到這一點與HTML表，CSS3 Flexbox結合CSS媒體查詢可以做到這一點。

這裏是我設置的媒體查詢，以突破5行2列，當屏幕尺寸去波紋管600px的（作爲一個例子）

嘗試在整頁和調整瀏覽器600px的下一個片段看到結果。

CSS-技巧的網站解釋非常好：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS Flexbox的由現代瀏覽器（IE 11，邊緣，瀏覽器，火狐，Safari，Android的，... http://caniuse.com/#search=flexbox）

.container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
} 
 

 
.item { 
 
    border: 1px solid red; 
 
    height: 50px; 
 
    width: 19%; 
 
    display: inline-flex; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .item { 
 
    width: 49%; 
 
    } 
 
}

<div class="container"> 
 
    <div class="item">1</div> 
 
    <div class="item">2</div> 
 
    <div class="item">3</div> 
 
    <div class="item">4</div> 
 
    <div class="item">5</div> 
 
    <div class="item">6</div> 
 
    <div class="item">7</div> 
 
    <div class="item">8</div> 
 
    <div class="item">9</div> 
 
    <div class="item">10</div> 
 
</div>

支持