如何使用 javascript 确定 html 表格的最小宽度？

Question

如果 html 表格设置为table-layout: auto;，则它的最小宽度由浏览器设置，由表格内容确定。因此，即使使用width: 100%，该表也会超出其容器。有没有办法使用 javascript 来找到这个最小宽度？

我正在尝试制作响应式表格解决方案。我做了类似的东西：http://jsbin.com/apane6/14

在移动设备上，表格的内容是隐藏的，您可以点击它来查看它的全屏版本。现在我正在使用媒体查询，但我想知道表格必须切换到这个移动视图的确切宽度。您甚至可以在示例中看到表格延伸到页面宽度之外，从而创建了一个滚动条，这是我试图避免的。

这是我的 CSS：

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    width: 100%;
}

@media (max-width: 768px) {
    table {
        table-layout: fixed;
        white-space:nowrap;
    }
    th, td {
        overflow: hidden;
        height: 15px;
        font-size: 0;
        color: transparent
    }
}

Answer 1

只是为了好玩，今天下午我玩弄了代码，想出了这个复杂的FIDDLE，这真的只是一个开始。

它将块模型分解为表格每个部分的每个组件。如果所有 td 的宽度相同，那么您只需要执行一个 td (:eq(0))，否则，您将不得不遍历所有列。假设没有内容，您可以将内部宽度调整为您想要的任何大小。

这有点复杂，但如果你对元素的相关部分求和，它应该会给你一个像素的答案。

JS

var tableleftmargin = $('table').css("margin-left").slice(0, -2);
var tableleftborder = $('table').css("borderLeftWidth").slice(0, -2);
var tableleftpadding = $('table').css("padding-left").slice(0, -2);

var tdleftborder = $('table tr td:eq(0)').css('borderLeftWidth').slice(0, -2);
var tdleftpadding = $('table tr td:eq(0)').css('padding-left').slice(0, -2);

var tdinnerwidth = $('table tr td:eq(0)').css('width').slice(0, -2);

var tdrightpadding = $('table tr td:eq(0)').css('padding-right').slice(0, -2);
var tdrightborder = $('table tr td:eq(0)').css('borderRightWidth').slice(0, -2);

var rightpaddingwidth = $('table').css("padding-right").slice(0, -2);
var rightborderwidth = $('table').css("borderRightWidth").slice(0, -2);
var rightmarginwidth = $('table').css("margin-right").slice(0, -2);

$('.putmehere').html(
                     "Table left margin = " + tableleftmargin + "<br />" +
                     "Table left border = " + tableleftborder + "<br />" +
                     "Table left padding = " + tableleftpadding + "<br />" +
                     "td left border = " + tdleftborder + "<br />" +
                     "td left padding = " + tdleftpadding + "<br />" +
                     "td inner width = " + tdinnerwidth + "<br />" +
                     "td Right padding = " + tdrightpadding + "<br />" +
                     "td Right border = " + tdrightborder + "<br />" +
                     "Table right padding = " + rightpaddingwidth + "<br />" +
                     "Table right border = " + rightborderwidth + "<br />" +
                     "Table right margin = " + rightmarginwidth + "<br />"
                    );

Answer 2

嗯，这并不是我想要的，但它确实有效。因为我正在复制表格以显示为叠加层，所以我可以抓住它的宽度，而不是试图弄清楚原始表格的宽度是多少（我不能，因为它的 CSS 已更改）。希望这个 JS 有意义。

$(document).ready(function (){  

    $('.overlay-element').on("click", function() {

        var overlayID = $(this).attr('id') + "-overlay";

        //animate overlay opening
        $("#"+overlayID).addClass('open');

        //drag.js allowing you to move the container within overlay with mouse
        drag("#"+overlayID+' .overlay-container').bind();

        //exit overlay
        $("#"+overlayID+' .overlay-exit').on("click", function() {
            $("#"+overlayID).removeClass( 'open' );
        });

    });


});


$(window).load(function() {

    //create overlay elements
    $('.overlay-element').each( function() {
        var overlayID = $(this).attr('id') + "-overlay";
        $("body").append(
                "<div id='"+overlayID+"' class='overlay overlay-scale'>
                    <div class='overlay-exit'></div>
                    <div class='overlay-container'>"
                         + $(this)
                            .clone()
                            .removeAttr('id')
                            .removeClass('overlay-element closed')[0]
                            .outerHTML 
                    + "</div>
                </div>"
            );

        //switch to mobile view for tables if their min width is larger than parent
        if ($("#"+overlayID+' table').width() > $(this).width()) {
            $(this).addClass('closed');
        }
    });

});

$(window).resize(function() {

    //switch to mobile view for tables if their min width is larger than parent
    $('.overlay-element').each( function() {
        var overlayID = $(this).attr('id') + "-overlay";

        if ($("#"+overlayID+' table').width()>$(this).width()) {
            $(this).addClass('closed');
        } else {
            $(this).removeClass('closed');
        }
    });

});