Javascript 表格布局全宽和全宽，第一个tr高度仅为40px，其余填充页面

我想要整页的表格布局 1：第一个tr的高度为40px 2：第二个tr将覆盖休息空间

与案例a类似：设备高度：1000px

第一个tr为40px，其余为960px

与案例a类似：设备高度：800px

第一个tr为40px，其余为860px

wise在所有情况下都相同，因为窗口从高度为H px的设备调整大小

---

高度的第一个tr:40px和其余（H-40）px有很多方法可以实现您描述的行为。让我概述几点：

此外，您不应该使用完整的表格来设置页面样式。事情应该用纯CSS完成，但我离题了

CSS：响应性设计

您可以使用

CSS

媒体

选择器来确定屏幕的大小，并相应地调整表格的像素宽度

@media all and (max-width: 100px) and (min-width: 800px), (min-width: 1151px) {

    tr:nth-of-type(1) {
        width: 40px;
    }
    tr:nth-of-type(2) {
        width: 760px;
    }
}

然后继续为其他屏幕大小写入值。这将产生“阶梯”效应；它可能没有你想要的那么准确

SASS:CSS预处理器

您还可以使用某种CSS预处理器，将其他元素视为变量，这样您就可以进行基本的数学运算，并以此方式计算宽度

Javascript

我建议使用Javascript来解决这个问题，尽管值得注意的是，这个解决方案有一些缺点（如果用户不支持Javascript会怎么样-这很少见，但也可能发生）。有退路

此操作的代码应如下所示：

$(document).ready(function() {
    var width = $(document).width(); // the width of the screen

    document.getElementById("tr1").style.width = "40px";
    document.getElementById("tr2").style.width = (width - 40) + "px";
});

您还可以在调整大小功能中包含此逻辑：

window.onresize = function(event) {
    var width = $(document).width(); // the width of the screen

    document.getElementById("tr1").style.width = "40px";
    document.getElementById("tr2").style.width = (width - 40) + "px";
};

---

看看这能不能让你接近。它在div标签上使用CSS表格样式。顶行是40px，其余的将展开或收缩以适应浏览器窗口。正如您的问题所述，“第一个tr的高度为40px 2：第二个tr将覆盖休息空间。”

诀窍是将html、正文和包装器的高度设置为100%

html{
height:100%;
width:100%;
margin:0;
padding:0;
border:0;
}

body { 
height:100%;
width:100%;
margin:0;
padding:0;
border:0;  
}

.wrapper {
height:100%;
width:100%;
display:table;
border-style:none;
border-collapse:collapse;
}

第一行中的单元格高度为40px

.cell-top {
display:table-cell;
height:40px;
}

我认为使用CSS表会让您更高兴，因为与HTML表相比，CSS表是一种现代的解决方案，功能更为广泛

---

更新 下面是使用HTML表更新的JSFIDLE。由于将表嵌套在现有表中，因此不需要html或主体CSS（用于JSFIDLE显示）。但是您需要设置以下css以使嵌套表填充空间

HTML

最高40px
底部

---

在JSFIDLE中调整浏览器窗口的大小，以查看表格是否调整为不同的大小，您可以对代码进行实验。

好的，我更新了问题，以讨论实现这一点的方法。如果您想让我更具体地了解我提到的任何一种方法，请告诉我。SASS:CSS预处理器？？基本上，我希望表中的表更深入，因此我更喜欢使用表，我没有cssAn html表示例的深层知识。答案中添加了一个JSFIDLE示例。您可以将其嵌套在另一个表中。您如何看待使用height=“calc（100%-40px）”calc也很好，但浏览器支持可能是您用户的一个问题？单击“全部显示”按钮查看calc浏览器支持。在上面的第二个JSFIDLE示例中，浏览器支持非常好。它不是说“计算（100%-40px）”，而是说将表格设置为100%高，将第一行设置为40px，让第二行自动填充剩余空间。

.nested-table {
height:100%;
width:100%;
border-style:none;
border-collapse:collapse;
}

.cell-top {
height:40px;
}

<table class="nested-table">
<tr>
<td class="cell-top">Top 40px</td>
</tr>
<tr>
<td class="cell-bottom">Bottom</td>
</tr>
</table>