我有这张桌子：
我喜欢让桌面可滚动，这样我就不必滚动页面了，但我可以在桌面内滚动。
function sortTable(table, col, reverse) {
var tb = table.tBodies[0], // use `<tbody>` to ignore `<thead>` and `<tfoot>` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
tr = tr.sort(function (a, b) { // sort rows
return reverse // `-1 *` if want opposite order
* (a.cells[col].textContent.trim() // using `.textContent.trim()` for test
.localeCompare(b.cells[col].textContent.trim())
);
});
for(i = 0; i < tr.length; ++i) tb.appendChild(tr[i]); // append each row in order
}
function makeSortable(table) {
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th) i = th.length;
else return; // if no `<thead>` then do nothing
while (--i >= 0) (function (i) {
var dir = 1;
th[i].addEventListener('click', function () {sortTable(table, i, (dir = 1 - dir))});
}(i));
}
function makeAllSortable(parent) {
parent = parent || document.body;
var t = parent.getElementsByTagName('table'), i = t.length;
while (--i >= 0) makeSortable(t[i]);
}
window.onload = function () {makeAllSortable();};table {
border-collapse: collapse;
width: 80%;
margin: auto;
background: #fff;
text-align: center;
}
td, th {
padding: 0.75em 0.5em;
text-align: center;
}
td.err {
background-color: #e992b9;
color: #fff;
font-size: 0.75em;
text-align: center;
line-height: 1;
}
th {
background-color: #7fb030;
font-weight: bold;
color: #fff;
white-space: nowrap;
text-align: center;
}
tbody th {
background-color: #7fb030;
text-align: center;
}
tbody tr:nth-child(2n-1) {
background-color: #f5f5f5;
transition: all .125s ease-in-out;
}
.overzicht tr:hover {
background-color: rgba(129,208,177,.3);
}<table class="overzicht scroll" id="table" style="width: 80%;">
<thead>
<tr style="cursor: hand;">
<th style="width: 10%;">Allemaal</th>
<th style="width: 18%;">Datum</th>
<th style="width: 16%;" class="left">Naam</th>
<th style="width: 10%;" class="left">Bedrijf</th>
<th style="width: 22%;" class="left">Email</th>
<th style="width: 14%;" class="left">SMS</th>
<th style="width: 10%;">Geblokkeerd</th>
</tr>
</thead><tbody>
<tr class="cus1">
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
<input type="hidden" name="ID" value="39">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jbn@ti.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="39">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="38">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jban@ti.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="38">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="36">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jboan@tri.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="36">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="37">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jboan@twi.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="37">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="48">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdn@tifdsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="48">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="50">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdn@tisdrd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="50">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="40">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jbsfdfn@ti.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="40">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="49">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdn@tiftrrd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="49">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="34">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Kees de jong
</td>
<td style="width: 10%;" class="left">
trined
</td>
<td style="width: 22%;" class="left">
jboan@trined.nl
</td>
<td style="width: 14%;" class="left">
0643937984
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="34">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="47">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdn@tifddddsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="47">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="51">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdrtgg@tisdrd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="51">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="35">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jboan@trinedd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="35">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="41">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jbsfdfn@tidsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="41">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="44">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdsdfn@tifdddsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="44">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="52">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdrtgg@tisfredrd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="52">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="46">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdsdfn@tifddddsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="46">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="33">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Kees de jong
</td>
<td style="width: 10%;" class="left">
trined
</td>
<td style="width: 22%;" class="left">
jboan@team.trined.n
</td>
<td style="width: 14%;" class="left">
0642937984
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="33">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="45">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
fdsdccdfn@tifdddsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="45">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="42">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jbsfgfgdfdfn@tidsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="42">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="32">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Kees de jong
</td>
<td style="width: 10%;" class="left">
trined
</td>
<td style="width: 22%;" class="left">
jbotman@team.trined.nl
</td>
<td style="width: 14%;" class="left">
0642937988
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja" selected="">Ja</option>
<option value="Nee">Nee</option>
</select>
<input type="hidden" name="IDS" value="32">
<input type="hidden" name="B" value="1">
<p style="display:none;">1</p>
</td></tr>
<tr class="cus1">
<td style="width: 10%;">
<select onchange="this.form.submit()" name="alles">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="ID" value="43">
<input type="hidden" name="A" value="0">
<p style="display:none;">0</p>
</td>
<td style="width: 18%;">
19-01-2017 10:28
</td>
<td style="width: 16%;" class="left">
Testpersoon
</td>
<td style="width: 10%;" class="left">
test
</td>
<td style="width: 22%;" class="left">
jbsfgfgdfdfn@tifddsd.nl
</td>
<td style="width: 14%;" class="left">
</td>
<form method="post"></form><td style="width: 10%;">
<select onchange="this.form.submit()" name="geblokkeerd">
<option value="Ja">Ja</option>
<option value="Nee" selected="">Nee</option>
</select>
<input type="hidden" name="IDS" value="43">
<input type="hidden" name="B" value="0">
<p style="display:none;">0</p>
</td>
</tr>
</tbody></table>
如何让我的tbody可滚动？
有人可以编辑我的代码片段并使其可滚动吗？
我已经可以排序了，现在我需要在桌子内滚动BODY !!
答案 0 :(得分：2)
你可以让你的身体变得绝对。 https://jsfiddle.net/qmmg0pu4/
tbody{
position:absolute;
max-height:200px;
overflow-y:auto;
}