带有固定标题的 HTML 选择标签？答案

【问题标题】：HTML select tag with fixed headline?带有固定标题的 HTML 选择标签？
【发布时间】：2018-06-22 13:40:21
【问题描述】：

我正在寻找一种解决方案来制作带有图片中标题的可滚动选择框。如果我使用表格，我不能选择任何行。我希望用户标记一个选项，这样他可以在点击按钮时将其删除。如果可能的话，我正在寻找一个简单的 html+css 解决方案。

如果我使用选择标签，我不确定如何添加任何标题。

欢迎提出任何建议！

到目前为止我已经尝试过：

div.tableContainer {
  clear: both;
  border: 1px solid #963;
  height: 285px;
  overflow: auto;
  width: 900px
}

div.tableContainer table {
  float: left;
}

thead.fixedHeader tr {
  position: relative;
}

thead.fixedHeader th {
  background: #C96;
  border-left: 1px solid #EB8;
  border-right: 1px solid #B74;
  border-top: 1px solid #EB8;
  font-weight: normal;
  padding: 4px 3px;
  text-align: left
}

html>body tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
  width: 100%
}

html>body thead.fixedHeader {
  display: table;
  overflow: auto;
  width: 100%
}

tbody.scrollContent td,
tbody.scrollContent tr.normalRow td {
  background: #FFF;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
  background: #EEE;
  border-bottom: none;
  border-left: none;
  border-right: 1px solid #CCC;
  border-top: 1px solid #DDD;
  padding: 2px 3px 3px 4px
}

<div id="tableContainer" class="tableContainer">
  <table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
    <thead class="fixedHeader">
      <tr>
        <th width="20%">Header 1</th>
        <th width="30%">Header 2</th>
        <th width="50%">Header 3</th>
      </tr>
    </thead>
    <tbody class="scrollContent">
      <tr>
        <td width="20%">Cell Content 1</td>
        <td width="30%">Cell Content 2</td>
        <td width="48%">Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
      <tr>
        <td>More Cell Content 1</td>
        <td>More Cell Content 2</td>
        <td>More Cell Content 3</td>
      </tr>
      <tr>
        <td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
        <td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
        <td>Even More Cell Content 3</td>
      </tr>
    </tbody>
  </table>
</div>

【问题讨论】：

希望您至少尝试自己编写代码。我建议你做一些additional research，无论是通过谷歌还是通过搜索，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。
我正在寻找提示，而不是要代码示例！我用谷歌搜索了很多，可能是错误的关键字。如果您不提出任何建议，您的评论将毫无帮助。你有关键字吗？我的选择框和标题代码是否正确？
我们不做提示..我们解决实际的代码问题。不，这里的select 可能是错误的选择，您需要编写具有相似但不同功能的替换代码。坦率地说，你在这里所拥有的本质上是一个滚动的table。
好的，这是我试过的表。
不存在针对您要实现的目标的简单 html+css 解决方案，但可能存在高级解决方案。到那时，您最好只使用 JavaScript 或重新考虑您的用户体验，使其更适合原生 HTML。

标签： html css select scrollable heading

【解决方案1】：

我建议您学习使用 DataTables，这是一个维护良好且文档齐全的库，其中包含许多优秀的插件和开发者用户社区。p>

var myDTable;
$(document).ready(function() {
  //An example of JavaScript sourced data, though you can instead have your thead and tbody rows defined in your HTML directly
  var dataSet = [];
  for(let i = 0; i < 100; i++) {
    dataSet.push({id:i, name:"Bob Dylan", email:"bob@columbia.com", phone:"512-973-2991"});
  }
  myDTable = $('#myTable').DataTable( {
      data: dataSet,
      columns: [
        { title: "Name", data:"name" },
        { title: "Email", data:"email"},
        { title: "Phone", data:"phone" }
      ],
      //select:true  Allows multiple row selection
      select:"single",
      pageLength:100,
      fixedHeader: true,
      dom:"frtip"
  });
  
  //Listening for event click
  $(document).on("click", "#myTable tbody tr", function() {
    //How to get the clicked row data
    var rowData = myDTable.row(this).data();
    console.log(rowData);
    
    //Get the selected row data
    var selectedRows = myDTable.rows({selected:true});
    var numSelectedRows = selectedRows.count();
    
    //Show hide delete button accordingly
    if(numSelectedRows == 0) {
      $('#deleteRowBtn').hide();
    } else {
      $('#deleteRowBtn').show();
    }
  });
  $(document).on("click", "#deleteRowBtn", function() {
    var selectedRows = myDTable.rows({selected:true});
    var rowToDelete = selectedRows.data()[0];
    console.log("Delete this row: ");
    console.log(rowToDelete);
  });
});

table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected {
    background-color: #417fd8 !important;
    color: white !important;
}
table.dataTable.display tbody>tr.selected>.sorting_1, table.dataTable.order-column.stripe tbody>tr.selected>.sorting_1 {
    background-color: #2868c3 !important;
}
table.dataTable tbody>tr {
  cursor:pointer
}
table.dataTable thead th, table.dataTable thead td {
    padding: 2px 18px;
    border: 1px solid #efefef;
    border-collapse: collapse;
}

#deleteRowBtn {
  position: fixed;
  width: 200px;
  margin-left: -100px;
  left: 50%;
  z-index: 1000;
  text-align: center;
  padding: 5px 10px;
  box-sizing: border-box;
  bottom: 10px;
  background-color: darkred;
  color: white;
  cursor: pointer;
  border-radius: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" type="text/css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" type="text/css">
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.7/css/select.dataTables.min.css" type="text/css">
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>

<table id="myTable" class="display"></table>
<div id="deleteRowBtn" style="display:none">Delete Selected Row</div>

更多资源：

https://datatables.net/

https://datatables.net/reference/option/select

https://datatables.net/reference/option/fixedHeader

【讨论】：