CSS可以将<td>标记放在另一个之下,如<tr>

Nak*_*lon 1 css html-table

有一个包含多个表格的网页.其中一个有一个tr,td内部> 15 秒.虽然越来越多td,但它们开始脱离屏幕.

我想垂直定位它们,就像它们是trs或divs一样.但:

  1. 我害怕在编辑网站HTML时破坏某些东西(可能是java模板);
  2. 我不想用JS修补页面,因为这将是如何/在何处放置该代码的另一个问题/问题.

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

Ark*_*ana 6

正如James Donnelly在评论中告诉你的那样,我认为这不是表格的正常行为.此外,我不知道您是否使用表格进行布局或表格数据.因此,我认为更喜欢将标记更改为类似于此示例的内容.

正如你所看到的,我做了一个替换:all <tr>into <div class="row">和all <td>into <div>.我将所有trtd结束标签也替换为关闭div,然后我将所有内部设置<div>float:left.这使得所有"td"都内联,就像一张桌子,但当它们到达页面边框时开始堆叠.

如果您想保留标记,还会有另一个修复.

  • 你可以设计<td>as display:block.这将你的所有<td>一个放在另一个之下,但这不适用于IE7/IE8.

  • 您可以将所有表格包含在div中,并将该div设置overflow-x:scroll为并确保max-width:100%,如此示例所示.

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

  • 詹姆斯唐纳利太糟糕了.修改表元素的显示属性是完全有效的.浏览器是否正确地尊重它是完全不同的.将表格数据填充到一堆div中因为"不喜欢表格的外观"与使用表格进行布局一样错误. (4认同)