JavaScript - HTML-Tabelle Spaltenbreite anpassen
In dieser Tabelle kann die Breite der Spalten individuell geändert werden.
| Nr. | Vorname | Name | Alter |
|---|---|---|---|
| 1 | Allison | DuBouis | 18 |
| 2 | Penelope | Mills | 36 |
| 3 | Sarah | Grant | 14 |
| 4 | Vanessa | Roberts | 27 |
| 5 | Oliver | Alsop | 12 |
| 6 | Jennifer | Forsyth | 7 |
| 7 | Michelle | King | 21 |
| 8 | Steven | Kelly | 55 |
| 9 | Julian | Ferguson | 15 |
| 10 | Chloe | Ince | 23 |
| 11 | Sarah | Myer | 22 |
Siehe auch: HTML-Tabelle filtern, HTML-Tabelle sortieren, HTML-Tabelle als CSV-Datei exportieren, Tabellenkalender und CSV-Datei einlesen und dynamisch als Tabelle ausgeben
<style>
table#foobar-table thead {
position: sticky;
}
table#foobar-table thead {
inset-block-start: 0;
}
table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
position: relative;
border: Solid 1px #888888;
padding: 5px;
}
table#foobar-table > thead > tr {
background-color: #FFAE5E;
}
table#foobar-table > tbody > tr:nth-child(even) {
background-color: #FFFFFF;
}
table#foobar-table > tbody > tr:nth-child(odd) {
background-color: #FFD2A6;
}
#foobar-table {
margin-left: 50px;
}
.resizer {
position: Absolute;
top: 0;
right: 0;
width: 5px;
cursor: w-resize;
user-select: None;
}
</style>
<table id="foobar-table">
<thead>
<tr>
<th>No.</th>
<th>First name</th>
<th>Last name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Andrea</td>
<td>Ross</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>Penelope</td>
<td>Mills</td>
<td>36</td>
</tr>
<tr>
<td>3</td>
<td>Sarah</td>
<td>Grant</td>
<td>14</td>
</tr>
</tbody>
</table>
<script>
// HTML-Tabelle Spaltenbreite anpassen
const createResizableTable = function(table) {
const cols = table.querySelectorAll("th");
[].forEach.call(cols, function(col) {
const resizer = document.createElement("div");
resizer.classList.add("resizer");
resizer.style.height = `${table.offsetHeight}px`;
col.appendChild(resizer);
createResizableColumn(col, resizer);
});
};
const createResizableColumn = function(col, resizer) {
let x = 0;
let w = 0;
const mouseDownHandler = function(e) {
x = e.clientX;
const styles = window.getComputedStyle(col);
w = parseInt(styles.width, 10);
document.addEventListener("mousemove", mouseMoveHandler);
document.addEventListener("mouseup", mouseUpHandler);
};
const mouseMoveHandler = function(e) {
const dx = e.clientX - x;
col.style.width = `${w + dx}px`;
};
const mouseUpHandler = function() {
document.removeEventListener("mousemove", mouseMoveHandler);
document.removeEventListener("mouseup", mouseUpHandler);
};
resizer.addEventListener("mousedown", mouseDownHandler);
};
createResizableTable(document.getElementById("foobar-table"));
</script>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<datalist> Datenliste
CSS - Mit import mehrere CSS-Dateien zusammenfassen
PHP - Zeichenkette nach Tabulator trennen
JavaScript - Prüfen, ob die Zahl gerade oder ungerade ist
MySQL - Bilder in einer Datenbank-Tabelle speichern und ausgeben