Question

我想创建一个固定标题高度（f.ex.20px）的表格，其他行高度应该按容器的百分比定义（f.ex.12％）。

行号从4到6不等，这是我的表行为错误的原因。标题的高度根据行数而变化，尽管它在css中定义（min-height，height和max-height确定）。

以下是CSS示例：

#container
{
  height: 800px;
}

#t1
{
  border-collapse: collapse;
  table-layout: fixed;
  //height: 100%;
  border: 1px solid black;
}

#head_row
{
  height: 20px;
  max-height: 20px;
  min-height: 20px;
}

tbody tr
{
    height: 12%;
    max-height: 12%;
    min-height: 12%;
}

tbody td
{
    border: 1px solid black;
    height: 12%;
    max-height: 12%;
    min-height: 12%; 
}

这是我想要实现的JSfiddle示例，但是没有将表高度设置为100％它不起作用，我评论了它。

jsfiddle here.

我忘记了什么或我做错了什么？有没有办法只使用HTML和CSS？

修改

我正在尝试制作一个小日历（我之前没有写过），我只是想看看google是如何做到这一点的：

Google calendar

他们将标题作为一个表，每行作为div，其中包含一行表... 好吧，我相信谷歌的人都知道他们在做什么，但是真的没有简单的方法吗？

Answer 1

按如下方式定义表格高度。

    height: 100%.

将根据您的定义引用容器高度。（min-height：800px;对于Container div来说更常规，以便在更多数据的情况下Container div可以增长。）

    height: 800px;

如果删除容器高度，表格将缩小回所需的最小高度。

表具有固定的标题高度和其他行的容器百分比

1 个答案: