CSS可以放置< td>标记一个在另一个之下，如< tr>做 [英] Can CSS place <td> tags one under another like <tr> do

问题描述

有一个包含多个表格的网页。其中一个在里面有一个 tr 和> 15 td 。虽然越来越多 td s，但它们开始脱离屏幕。

There is a webpage with several tables. One of them has a single tr and >15 tds inside. While there are becoming more and more tds, they start to get out of screen.

我想要定位它们是垂直的，就好像它们是 tr s或 div s。但是：

I want to position them vertically, like if they were trs or divs. But:

1. 我害怕在编辑网站HTML时破坏某些东西（可能是java模板）;


2. 我不想用JS修补页面，因为这将是一个额外的问题/如何/放置该代码的问题。

所以我想用CSS解决它，因为这样很容易设置我的个人自定义CSS，如果我的同事会说我的重新设计糟透了，而超出屏幕边界很酷。此外，CSS更容易编辑并实时查看结果而不是编辑描述JS。

So I would like to solve it with CSS, because in that way it is easy to set up my personal custom CSS, if my colleagues would say that my redesign sucks while going beyond screen borders was cool. Also CSS is easier to edit and see results in real time than edit desctructing JS.

推荐答案

As James Donnelly在评论中告诉你，我认为这不是表格的正常行为。此外，我不知道您是否使用表格进行布局或表格数据。因此，我认为更愿意将标记更改为此示例。

As James Donnelly tells you in the comments, I think that's not the normal behaviour of tables. Also, I don't know if you are using a table for layout or for tabular data. So, I think was preferible to change the markup into something like this example.

如你所见，我做了一个替换：所有< tr> 进入< div class =行> 和所有< td> 进入< div> 。我将所有 tr 和 td 结束标记也替换为关闭div，然后我设置所有内部< div> ， float：left 。这会将所有td内联，就像一张桌子一样，但是当它们到达页面的边框时开始堆叠。

As you can see, I did a replace: all <tr> into <div class="row"> and all <td> into <div>. I replaced all the trand td closing tags too into closing divs, and then I set all the inner <div> with float:left. This puts all "td's" inline, just like a table, but when they reach the border of the page starts stacking down.

我脑子里还有另外一些修复如果你想保留标记。

There are another fixes that comes into my mind if you want to preserve the markup.

• 你可以设置< td> as display：block 。这会将您的所有< td> 置于另一个之下，但这不适用于IE7 / IE8。

• You could style the <td> as display:block. This puts all your <td> one under another, but this doesn't work on IE7 / IE8.

您可以将所有表格包含在div中并使用 overflow-x：scroll 设置该div并确保 max-width：100 ％，如此示例。

You could enclose all table in a div and set that div with overflow-x:scroll and to make sure max-width:100%, as this example.

希望这有帮助，不要害怕破坏事情，有时候是最好的学习方法！ ;）

Hope this helps, and don't be afraid to break things, sometimes is the best learning method! ;)

这篇关于CSS可以放置< td>标记一个在另一个之下，如< tr>做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！