javascript - 中心表，即使它比父容器宽

我有一种情况，其中限制HTML页面的宽度（使用max-width），以使页面上的文本不会变得太宽（并且难以阅读）。

我也有一些数据显示在表中（居中），只要表适合父容器中，它们就可以正常工作。但是有时表格比父元素宽，这时它不再居中，而是向左对齐。

有没有一种方法可以使表格居中，即使它父表溢出也可以居中？

鉴于我的HTML看起来像这样，需要什么CSS才能完成此任务？

<div class=content>
  <p>Lorem ipsum...</p>
  <table>
      ...
  </table>
  <p>Lorem ipsum...</p>
</div>

顺便说一句。可能很明显，但是我在这里只谈论水平居中。

这是我的情况的小提琴：http://jsfiddle.net/zrajm/tnAS3/

最佳答案

CSS margin: 0 auto;仅在表适合其父元素时才起作用，如果该表变得比其左对齐要大。

为了居中放置比父表宽的表，需要设置负的左边距。如果知道表的确切尺寸，则可以直接在CSS中完成（使用类似margin-left: -130px的方法）。但是，如果表格的宽度可以变化，则实现此目的的唯一方法是使用Javascript调整左边距。

（下面的代码假定使用jQuery，以及问题中描述的HTML结构。）

var contentWidth = $('.content').width();
$('table').each(function (i, table) {
    var tableWidth, margin;
    table = $(table);
    tableWidth = table.width();
    if (tableWidth > contentWidth) {
        margin = (tableWidth - contentWidth) / 2;
        table.css('margin-left', '-' + margin + 'px');
    }
});

上面的脚本将查找比.content宽的表，并仅修改其左页边距。

（还有一个小提琴：http://jsfiddle.net/zrajm/tnAS3/2/）