Html 当表格垂直扩展到其最大高度时，使元素在下一个表格单元格列中弹出
我正在一个页面上工作，我目前有12个标题放在菜单中。我使用了一个表格来布置项目。单击一个图元/项目后，表格将垂直展开并显示项目说明 我希望为整个表设置一个“最大高度”属性，以便它只能扩展到某一点。因此，每当由“打开”和“关闭”项目之和确定的表列的总高度超过某个高度时，元素就会跳到表中的下一列，在那里它可以继续向下扩展。基本上，它的功能就像网格中的规则列一样 这里有一些代码Html 当表格垂直扩展到其最大高度时，使元素在下一个表格单元格列中弹出,html,css,html-table,height,multiple-columns,Html,Css,Html Table,Height,Multiple Columns,我正在一个页面上工作，我目前有12个标题放在菜单中。我使用了一个表格来布置项目。单击一个图元/项目后，表格将垂直展开并显示项目说明 我希望为整个表设置一个“最大高度”属性，以便它只能扩展到某一点。因此，每当由“打开”和“关闭”项目之和确定的表列的总高度超过某个高度时，元素就会跳到表中的下一列，在那里它可以继续向下扩展。基本上，它的功能就像网格中的规则列一样 这里有一些代码 <script src="https://ajax.googleapis.com/ajax/libs/jque
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#Project1").click(function(){
$("p.Describtion1").toggle();
});
});
</script>
</head>
<body>
<table id="content">
<tr>
<td id="Project1">
Wer Baut Der Stadt 2019
<br>
<p class="Describtion1" style="display:none;">
Identity and Font developed for the lecture series on architecture conducted by No Image in Berlin.
</p>
<br>
</td>
<td>2019</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
#content {
display: flex;
flex-grow: 1;
flex-direction: column;
max-height: 500px;
}
#content td {
display: flex;
flex-grow: 1;
flex-direction: column;
}
如果我理解的话，您有一行，您希望将内容分层到列中，并逐个填充。标记的内容不会“跳转”到下一个标记，但列CSS可能会模仿它 示例中有一些注释，您可以在其中调整值或找出目的
$（文档）.ready（函数（）{
$（“.Project1”）。单击（函数（）{
$（this.next（）.toggle（）；
});
})；/*重置，可选*/
* {
保证金：0；
填充：0；
框大小：边框框；
}
/* =====================*/
/*配置设置大小*/
/* =====================*/
#内容{
最小高度：20em；
最大高度：500px；/*这是您的最大高度*/
}
文章{
最小高度：4em；/*但是，这里仍然设置了一个适合您需要的最小高度*/
列宽：250px；/*此处设置列的宽度*/
列规则：实心1px；/*如果列之间需要边框*/
}
.描述{
显示：无；/*如果希望在加载时看到它们，则不显示*/
}
/* =====================*/
/*结束配置*/
/* =====================*/
h1{
字体大小：inherit；/*30px*1.6em使此处太大*/
光标：指针；/*使其明显可点击*/
}
身体{
字体系列：“Helvetica Neue”；
}
#内容{
显示器：flex；
柔性流动：柱；
overflow-x:hidden；/*改为让行滚动*/
溢出：自动；/*可能不够高，无法容纳每个条目*/
边缘：0 1米；
}
文章{
弹性：1；/*均匀调整尺寸*/
overflow-y:hidden；/*将内容包装到列中*/
overflow-x:auto；/*它可能会展开超过视口，使此视口仅滚动*/
边框：实心；
保证金：2倍；
}
.Project1:悬停{
文字装饰：下划线；
游标：默认值；
}
p{
文本对齐：左对齐；
左侧填充：30px；
右侧填充：30px；
字体大小：15px；
文本对齐：对齐
}
/*在换行到下一列之前，推送内容以填充第一列*/
.描述：之后{
内容：“；
浮动：左；
利润底部：100%；
}
一些头衔
在turpis pulvinar facilisis.Ut felis.Praesent dapibus，neque id cursus faucibus，tortor neque egestas augue，eu vulputate magna eros eu erat.Aliquam erat volatic.Nam dui mi，tincidunt quis，accumsan
梅特斯卢克图斯设施门
一些头衔
在turpis pulvinar facilisis.Ut felis.Praesent dapibus，neque id cursus faucibus，tortor neque egestas augue，eu vulputate magna eros eu erat.Aliquam erat volatic.Nam dui mi，tincidunt quis，accumsan
梅特斯卢克图斯设施门
一些头衔
在turpis pulvinar facilisis.Ut felis.Praesent dapibus，neque id cursus faucibus，tortor neque egestas augue，eu vulputate magna eros eu erat.Aliquam erat volatic.Nam dui mi，tincidunt quis，accumsan
梅特斯卢克图斯设施门
一些头衔
佩伦特斯克居住者莫比·特里斯蒂克·塞内特斯和马莱苏达是一位著名的屠夫。前庭侵权者，世袭者，遗赠者，临时的遗赠者，安提斯。不允许欧盟自由人坐在遗赠者的面前。
Mauris Placelat eleifend leo.Quisque sit amet est和sapien ullamcorper pharetra.前庭，调味品sed，Comodo vitae，ornare sit amet，wisi.Aenean发酵剂，Elite eget tincidunt调味品，eros ipsum rutrum orci，sagittis
在turpis pulvinar facilisis.Ut felis.Praesent dapibus，neque id cursus faucibus，tortor neque egestas augue，eu vulputate magna eros eu erat.Aliquam erat volatic.Nam dui mi，tincidunt quis，accumsan
梅特斯卢克图斯设施门
一些头衔
佩伦特斯克居住者莫比·特里斯蒂克·塞内特斯和马莱苏达是一位著名的屠夫。前庭侵权者，世袭者，遗赠者，临时的遗赠者，安提斯。不允许欧盟自由人坐在遗赠者的面前。
#content {
display: flex;
flex-grow: 1;
flex-direction: column;
max-height: 500px;
}
#content td {
display: flex;
flex-grow: 1;
flex-direction: column;
}