在響應式設計中移動整個TD？

我有一個網頁，我正在轉變成一個響應式頁面。我有一個傳統的TR和TD的桌子。當達到一定寬度時，是否有辦法移動TD的內容？看到下面的代碼（無法發佈圖片） - 我想D（一個按鈕）除了A以外的每個表格行移動一些寬度。在響應式設計中移動整個TD？

<tr> <td>A<td>B<td>C<td>D

應該變成：

<tr> <td>AD<td>B<td>C

我希望你明白了一下我所期待的。是否最好的方法是始終將它隱藏在那裏，並在達到寬度時使其可見？或者這會讓網站變慢？

2014-09-04 MiAs

您無法使用CSS更改表格結構。最好的辦法不是首先使用表格進行佈局。嘗試發佈一些設計草圖，以不同的屏幕尺寸顯示您想要的佈局。 – RoToRa 2014-09-04 08:38:24

你試過有<td>與它的CSS樣式爲display:inline-block; width:20% min-width:100px; - 這將設置的tr的td至20％的寬度，直到它變成100像素寬，什麼比這更小將給tr它將會顯示爲在其自己的行上的塊元件

更改： A | B | C | d

到

一個

乙

你的問題的措辭古怪但是，如果我誤解了這個問題，對不起

來源

2014-09-04 07:53:34 LiamHT

你最好的辦法是隱藏/顯示內容而不是嘗試移動它們。所以放在屏幕寬度你不希望最後一個單元格可見。

例如：

HTML

<table> 
    <tr> 
     <td>A<span class="showMobile">D</span></td> 
     <td>B</td> 
     <td>C</td> 
     <td class="hideMobile">D</td> 
    </tr> 
</table>

CSS

.showMobile{ 
    display:block; 
} 
.hideMobile{ 
    display:none; 
} 

@media (min-width:500px){ 
    .showMobile{ 
     display:none; 
    } 
    .hideMobile{ 
     display:block; 
    } 
}

JSFIDDLE DEMO

關於速度的問題。基於媒體查詢的隱藏/顯示應該比使用JS移動/移除/讀取DOM元素快得多。

PS。小心你的DOM標記，你的標籤沒有被關閉，這會變得混亂。

來源

2014-09-04 07:55:53 haxxxton

在響應式設計中移動整個TD？

回答

相關問題