HTML select tag with fixed headline? - html

Question

I'm looking for a solution to make a scrollable select box with heading like in the picture. If I use a table, I can't choose any of the lines. I want the user to mark one option, so he can delete it when he hits the button. I'm looking for a simple html+css solution if it's possible.
If I use the select-tag I'm not sure how to add any headings.
Every suggestion is welcome!
What I've tried so far:
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>

Answer 1

I recommend you learn to use DataTables which is well maintained & documented library which has a number of good plugins and a community of developer users.
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>
More resources:
https://datatables.net/
https://datatables.net/reference/option/select
https://datatables.net/reference/option/fixedHeader