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，这真的只是一个开始。

它将块模型分解为表的每个部分的每个组件。如果你的所有tds都是相同的宽度，那么你只需要做一个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 />"
                    );

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

1 个答案: