Question

有一个包含多个表格的网页。其中一个内部有一个tr和＆gt; 15 td s。虽然td越来越多，但它们开始脱离屏幕。

我想垂直定位它们，就像它们是tr s或div s一样。但是：

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

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

Answer 1

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

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

如果您想保留标记，还有另外一些修复。

您可以将<td>设为display:block。这会将您的所有<td>置于另一个之下，但这不适用于IE7 / IE8。
您可以将所有表格包含在div中，并将该div设置为overflow-x:scroll并确保max-width:100%为this example。

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

Answer 2

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

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/

Answer 3

make display：inline-table; 它对我有用。

CSS可以像往常一样将标签放在另一个下面

3 个答案: