Question

我有一个网页，我正在转变为一个响应式页面。我有一个传统的TR＆s和TD＆amp; s表。有没有办法在达到一定宽度时移动TD的内容？请参阅下面的代码（暂时不能发布图片） - 我希望D（一个按钮）除了A之外还为每个表格行移动一些宽度。

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

应该成为：

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

我希望你能理解我正在寻找的东西。是最好的方法让它始终隐藏在那里，并在到达宽度时使其可见？或者这会让网站变慢吗？

Answer 1

您是否尝试将<td>的CSS样式设置为display:inline-block; width:20% min-width:100px; - 这会将td的宽度设置为tr的20％，直到它成为tr 100px宽，任何小于它的东西都会给{{1}}它在自己的行上显示为一个块元素

变化： A | B | C | d

到

A

乙

C

d

然而，你的问题措辞奇怪，所以如果我误解了这个问题，抱歉

Answer 2

最好的办法是隐藏/显示内容，而不是试图移动它们。所以放在屏幕宽度上你不希望最后一个单元格可见。

例如：

<强> 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标记，你的标签没有被关闭，这可能会变得混乱。

在响应式设计中移动整个TD？

2 个答案: