当表格垂直扩展到最大高度时-在下一个表格单元格列中弹出元素

Question

我正在一个页面上工作，当前在菜单上放置12个标题。我用一张桌子来布置项目。单击一个元素/项目后，表格将垂直扩展并显示项目说明。

我希望为整个表格设置max-height属性，以便它只能扩展到特定点。因此，只要表列的总高度（由“已打开”和“已关闭”项目的总和确定）超过特定高度，该元素就会跳到表中的下一列，在该列中它可以继续向下扩展。好像它像网格中的常规列一样起作用。

这里是一些代码

    <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>

body {
  font-family: 'Helvetica Neue';
  text-align: center;
}

#content {
  width: 100%;
  border-spacing: 0;
}

#content td {
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  vertical-align: top;
  text-align: left;
  font-size: 30px;
  max-height: 500px;
}

#content td:nth-child(odd) {
  width: 18%;
}

#content td:nth-child(even) {
  width: 7%;
}


  #Project1:hover {
    text-decoration: underline;
      cursor: default;
    }


p {

display: inline-block;
text-align: left;
padding-left:30px;
padding-right:30px;
font-size: 15px;

}

Answer 1

#content {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    max-height: 500px;
}

#content td {
     display: flex;
     flex-grow: 1;
     flex-direction: column;
}

当表格垂直扩展到最大高度时-在下一个表格单元格列中弹出元素

问题描述投票：0回答：1

1个回答

最新问题

当表格垂直扩展到最大高度时-在下一个表格单元格列中弹出元素

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1