Javascript 下拉表标题被表隐藏

你好，我在一个关于校园欺凌问题的网络应用程序中工作。我想显示一个包含欺凌报告的表。一个表格标题是“Cursos”，这是一个包含所有学校课程的下拉菜单。问题是，下拉菜单的一部分（从第三个选项或课程开始）被表格隐藏，但滚动条会滚动到其余课程。我希望所有的选项都显示出来，并且不希望使用滚动条来滚动课程。任何想法（我是编程新手，所以我对css不是很有经验，如果这是一个noob问题，很抱歉：）） （在顶部我添加了一张问题的照片） 这是我的html：

{% extends "layout.html" %}

{% block title %}
    Reportes de Victimas
{% endblock %}

{% block main %}
<h1 class="display-3">Reportes de Víctimas</h1>
    <form action="/" method="post">
        <table class="table table-striped" id="myTableVict">
        <thead>
            <tr>
                <th>Escuela</th>
                <th>

                <div class="dropdown">
                    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
                      <span class="caret"></span></button>
                      <div class="dropdown-content"  id="divo">
                        <a href="#">Todos</a>
                        {% for hechito in hechitos %}
                        <a href="#">{{ hechito.curso }}</a>
                        {% endfor %}

                  </div>
                </th>
                <th>Descripción del hecho</th>
            </tr>
        </thead>

        <tbody>
<!--for is to loop in each row of the table of the selected database,you have to use { always with a space at left and right  and stock.nam the . because it is like opening a dict and chosing the column name -->

    {% for hecho in hechos %}
                <tr>
                    <td>{{ hecho.escuela }}</td>
                    <td>{{ hecho.curso }}</td>
                    <td>{{ hecho.hecho }}</td>

                </tr>
            {% endfor %}

        </tbody>
    </table>
    </form>
    <script>
              var table = document.getElementById("myTableVict");
              var inputs = table.getElementsByTagName("a");
          //    var rows = table.getElementsByTagName("tr");
              var rows = table.tBodies[0].rows

              for (var i = 0; i < inputs.length; i++) {

                var input = inputs[i];

                input.addEventListener("click", function () {
                  var selectedCourse = this.textContent.trim();

                //  alert(selectedCourse);
                  for (row of rows) {

                    let td = row.getElementsByTagName('td')[1]
                    if (!td) { continue }
                    let course = td.textContent.trim()
                    if (course === selectedCourse || selectedCourse == "Todos") {

                      row.style.removeProperty('display')
                    } else {
                      row.style.setProperty('display', 'none')
                    }
                    }
                });
              }

    </script>

{% endblock %}

{%extends“layout.html”%}
{%block title%}
维克蒂马斯报道
{%endblock%}
{%block main%}
维克蒂斯报告
埃斯库埃拉
库索
{hechitos%中的hechito为%1}
{%endfor%}
描述德尔赫乔
{hecho中hecho的%hecho%}
{{hecho.escuela}}
{{hecho.curso}}
{{hecho.hecho}}
{%endfor%}
var table=document.getElementById（“myTableVict”）；
var输入=table.getElementsByTagName（“a”）；
//var rows=table.getElementsByTagName（“tr”）；
var rows=table.tBodies[0]。行
对于（变量i=0；i

CSS:

/*下拉按钮*/
.dropbtn，#naco{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉内容a:悬停{背景色：#ddd；}
/*悬停时显示下拉菜单*/
.dropdown:hover.dropdown内容{display:block；}
/*显示下拉内容时，更改下拉按钮的背景色*/
.dropdown:hover.dropbtn{背景色：#3e8e41；}
/*波顿2号*/
.按钮1{
背景色：#4CAF50；/*绿色*/
边界：无；
颜色：白色；
填充：15px 32px；
文本对齐：居中；
文字装饰：无；
显示：内联块；
字体大小：16px；
利润：4倍2倍；
光标：指针；
-webkit转换持续时间：0.4s；/*Safari*/
过渡时间：0.4s；
盒影：0.8px 16px 0 rgba（0,0,0,0.2），0.6px 20px 0 rgba（0,0,0.19）；
}

原因是，下拉列表实际上呈现在可滚动容器下。只要容器的高度有限，就应切断下拉菜单。因此，解决方案是使用JQuery将下拉列表附加到body元素下面。请添加此JQuery代码

$（函数（）{
var下拉菜单；
var下拉按钮；
$（“#下拉按钮”）。悬停（函数（e）{
如果（下拉菜单）返回；
dropdownMenu=$（e.target）.sides（'.dropdown content'）；
下拉按钮=$（e.target）；
//拆下它并将其附加到主体
$（'body'）.append（dropdownMenu.detach（））；
//抓住新的偏移位置
var eOffset=$（e.target）.offset（）；
//确保将其放置在正常放置的位置（这可以改进）
下拉菜单.css({
“显示”：“块”，
'top'：eOffset.top+$（e.target）.outerHeight（），
“left”：eOffset.left
});
}，功能（e）{
var children=dropdownMenu.find（如relatedTarget）；
if（children.length==0）{
$（e.target.parent（）.append（dropdownMenu.detach（））；
dropdownMenu.hide（）；
下拉菜单=null；
dropdownButton=null；
}
});
$（'.dropdown content'）.mouseleave（函数（e）{
如果（e.relatedTarget.id！=“下拉按钮”）{
dropdownButton.parent（）.append（dropdownMenu.detach（））；
dropdownMenu.hide（）；
下拉菜单=null；
dropdownButton=null；
}
});
});您能在此检查您的代码吗请：-

<thead>
        <tr>
            <th>Escuela</th>
            <th>

            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
                  <span class="caret"></span></button>
                  <div class="dropdown-content"  id="divo">
                    <a href="#">Todos</a>
                    {% for hechito in hechitos %}
                    <a href="#">{{ hechito.curso }}</a>
                    {% endfor %}

              </div>
            </th>
            <th>Descripción del hecho</th>
        </tr>
    </thead>


埃斯库埃拉
库索
{hechitos%中的hechito为%1}
{%en
<thead>
        <tr>
            <th>Escuela</th>
            <th>

            <div class="dropdown">
                <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="botoncin" id="dropdown-button">Curso
                  <span class="caret"></span></button>
                  <div class="dropdown-content"  id="divo">
                    <a href="#">Todos</a>
                    {% for hechito in hechitos %}
                    <a href="#">{{ hechito.curso }}</a>
                    {% endfor %}

              </div>
            </th>
            <th>Descripción del hecho</th>
        </tr>
    </thead>

<div class="dropdown">