javascript - 根据屏幕宽度将表格单元格或列表项移动到第二行

Question

我的问题很简单。

首先，看一下这段代码:

http://jsfiddle.net/Jk8Nr/

我只有一个非常简单的表格，其中包含一些填充、边框和文本对齐。

如果您访问上面的 jsFiddle，您可以增加结果窗口的宽度，所有表格元素都将舒适地定位。但是，如果您减小所述窗口的宽度，我希望表格单元格按顺序移动到第二行，这样就不需要横向滚动了。

我不介意使用 <ul><li>为此而不是表格，但我确实希望能够做到这一点。

如果有人熟悉解决方案，请告诉我。我不介意使用 jQuery/JS/CSS，但我对其他很多东西都不熟悉。

更新

这是带有工作解决方案的更新后的 jsFiddle:

http://jsfiddle.net/Jk8Nr/3/

Answer 1

添加

border-collapse: separate;

您的 TABLE 样式

和

display: inline-block;

到你的 TD/TH-Style...

干杯。