HTML标头表中的下拉列表 [英] Dropdown list inside the HTML header table
本文介绍了HTML标头表中的下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< pre class = snippet-code-html lang-html prettyprint-override>
< link href = https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font -awesome.css rel = stylesheet>< link href = https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css rel = stylesheet>< ; link href = http://getbootstrap.com/2.3.2/assets/css/bootstrap.css rel = stylesheet />< link rel = stylesheet href = https：// cdnjs。 cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\"><!--JS文件->< script src = https：// ajax .googleapis.com / ajax / libs / jquery / 3.4.1 / jquery.min.js>< / script>< script src = https://cdnjs.cloudflare.com/ajax/libs/popper。 js / 1.14.7 / umd / popper.min.js< // script>< script src = https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js > // script>< div class = row-fluid top-space-20> < table class = table table-striped> < thead> < tr> <学生ID< / th> <学生姓名< / th> <学生电子邮件< / th> <部门< / th> < th>等级< select class = form-control id = statusFilter> < option value =>学生成绩< / option> < option value =等级A> A< / option> < option value =等级B> B< / option> < option value =等级C> C< / option> < option value =等级D> D< / option> < option value =等级E> E< / option> < option value =成绩F> F< / option> < option value = Grade G> G< / option> < / select> < / div> < / th> < th>动作< / th> < / tr> < / thead>
我要添加下拉列表除了HTML标头我只想在标题旁边看到下拉箭头。但到目前为止，我可以看到展开的下拉菜单，它位于标题下方。
HTML代码为
< link href = https://netdna.bootstrapcdn.com/font- awesome / 4.0.3 / css / font-awesome.css rel = stylesheet>
< link href = https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css rel = stylesheet>
< link href = http://getbootstrap.com/2.3.2/assets/css/bootstrap.css rel = stylesheet />
< link rel = stylesheet href = https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
<！-JS文件->
< script src = https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js>< / script>
< script src = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js< / script>
< script src = https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js>< / script>< div class = row-fluid top-space-20>
< table class = table table-striped>
< thead>
< tr>
thth学生ID // th
<学生姓名< / th>
< th>学生电子邮件< / th>
<部门< / th>
< th>等级
<选择类= form-control id = statusFilter>
< option value =>学生成绩< / option>
< option value = A级> A< / option>
< option value =成绩B> B< / option>
< option value =成绩C> C< / option>
< option value =成绩D> D< / option>
< option value =成绩E> E< / option>
< option value =成绩F> F< / option>
< option value = Grade G> G< / option>
< / select>
< / div>
< / th>
< th< / th;
< / tr>
< / thead>
我看到下拉列表非常大，并且位于成绩标题下方。我只希望显示下拉箭头，应该怎么做？
我是HTML的新手，可以帮助我吗？
解决方案
如果您能说出您要尝试的方法，我们可以为该问题建议替代解决方案吗？但是，如果您按要求使用它，则有一个解决方法。为选择元素分配18px的宽度。
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><div class="row-fluid top-space-20">
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Student Email</th>
<th>Department</th>
<th>Grade
<select class="form-control" id="statusFilter">
<option value="">Student grade</option>
<option value="Grade A">A</option>
<option value="Grade B">B</option>
<option value="Grade C">C</option>
<option value="Grade D">D</option>
<option value="Grade E">E</option>
<option value="Grade F">F</option>
<option value="Grade G">G</option>
</select>
</div>
</th>
<th>Actions</th>
</tr>
</thead>
I want to add the drop down list besides the HTML header. I wante to see only the dropdown arrow head beside the header. But as of now I can see the expanded dropdown and it's below the header. The HTML code is
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--JS files-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><div class="row-fluid top-space-20">
<table class="table table-striped">
<thead>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Student Email</th>
<th>Department</th>
<th>Grade
<select class="form-control" id="statusFilter">
<option value="">Student grade</option>
<option value="Grade A">A</option>
<option value="Grade B">B</option>
<option value="Grade C">C</option>
<option value="Grade D">D</option>
<option value="Grade E">E</option>
<option value="Grade F">F</option>
<option value="Grade G">G</option>
</select>
</div>
</th>
<th>Actions</th>
</tr>
</thead>
I can see that drop down is very large and I can see it's below the grade header. I want only the dropdown arrow should be visible?How should I do it? I am new to the HTML can some one help me?
解决方案
If you can tell what you are trying to do we can suggest an alternate solution for that problem. But if you need it as asked there is a workaround. Assign 18px width for the select element.
这篇关于HTML标头表中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
