1

有一个包含几个表格的网页。其中一个内部有一个tr和> 15 tds。虽然s越来越多td，但他们开始走出屏幕。

我想将它们垂直放置，就像它们是trs 或divs 一样。但：

  1. 我害怕在编辑网站 HTML 时破坏某些东西（可能是 java 模板）；
  2. 我不想用 JS 修补页面，因为这将是一个额外的问题/问题，即如何/在哪里放置该代码。

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

4

3 回答 3

7

正如詹姆斯唐纳利在评论中告诉你的那样，我认为这不是表格的正常行为。另外，我不知道您是使用表格进行布局还是表格数据。因此，我认为最好将标记更改为类似this example的内容。

如您所见，我做了一个替换： all <tr>into<div class="row">和 all <td>into <div>。我也将所有结束标签替换tr为td结束 div，然后我将所有内部设置<div>为float:left. 这会将所有“td”内联，就像一个表格一样，但是当它们到达页面的边界时开始向下堆叠。

如果您想保留标记，我会想到另一个修复程序。

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

  • 您可以将所有表包含在一个 div 中，并使用 和 设置该 div 以overflow-x:scroll确保max-width:100%，如本例所示。

希望这会有所帮助，不要害怕破坏东西，有时是最好的学习方法！;)

于 2013-06-13T11:56:28.577 回答
0

您可以使用 jQuery 循环遍历每个 tr 和 td 并增加包含 tr 的高度，根据第一个的大小进行相对定位。它仅适用于没有 colspans/rowspans 并且填充可能会导致问题的某些情况。

var table = $('table');
var cellHeight = $('td',table).first().height();
var cellWidth = $('td',table).first().width();
var runningTop = 0;
$('tr',table).each(function(i,row) {
    var rowCells = $(this).find('td');
    $(this).height(cellHeight*(rowCells.length))
    rowCells.each(function(x,cell) {
        $(cell).css({ "position": "relative","top":(cellHeight*x)+runningTop,"left": "-"+(cellWidth*(x))+"px" });
        runningTop = runningTop+cellHeight;
    });
});

需要工作，但这是一个想法http://jsfiddle.net/hPhRX/1/

于 2014-04-02T15:23:43.670 回答
0

显示：内联表；它对我有用。

于 2018-10-29T09:49:07.523 回答