当表格高度为 100% 时，如何将表格行设置为特定值？答案

【问题标题】：How to set table row at specific value when table height is 100%?当表格高度为 100% 时，如何将表格行设置为特定值？
【发布时间】：2017-10-19 17:20:27
【问题描述】：

我想在一个高度为 100% 的表格中列出文件：)

这是我的 HTML（它是玉 (pug)，因为我使用 NodeJS）：

div.table-responsive
  table
    tr(style='line-height: 2vh;height: 2vh;')
      th File
      th Type
      th Size
      th Options
    tr(style='line-height: 2vh;height: 2vh;')
      td Jill
      td Smith
      td 50
      td test
    tr(style='line-height: 2vh;height: 2vh;')
      td Eve
      td Jackson
      td 94
      td test

这也是我的 CSS：

table {
    color: black;
    border: 1px solid black;
    background: whitesmoke;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 90vh;
    width: 100%;
    padding: 3%;
    table-layout: fixed;
}

tr {
    border-bottom: 1px solid black;
}

.table-responsive {
    overflow-x: auto;
    margin: 4%;
}

这是渲染：

那么我怎样才能将所有行放在 2vh 高度（例如）并在没有行时在表格中留一个空白？

谢谢！

【问题讨论】：

标签： html css html-table css-tables

【解决方案1】：

我终于通过使用响应式类作为背景找到了解决方法

table {
    color: black;
    height: auto;
    width: 100%;
}

tr {
    border-bottom: 1px solid black;
}

td, th {
    padding: 1%;
}

.table-responsive {
    overflow-x: auto;
    margin: 4%;
    background: whitesmoke;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    height: 90vh;
}

并删除它：(style='line-height: 2vh;height: 2vh;')

现在结果如下所示： Image

（我无法发布内嵌图片）谢谢！

【讨论】：