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 {
 
positionsticky;
}

table#foobar-table thead {
 
inset-block-start0;
}

table#foobar-table,
table#foobar-table > thead > tr > th,
table#foobar-table > tbody > tr > td {
positionrelative;
 
borderSolid 1px #888888;
 
padding5px;
}

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-left50px;
}

.
resizer {
 
positionAbsolute;
 
top0;
 
right0;
 
width5px;
 
cursorw-resize;
 
user-selectNone;
}
</
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(colresizer);
 });
};

const 
createResizableColumn = function(colresizer) {
 
let x 0;
 
let w 0;

 const 
mouseDownHandler = function(e) {
  
e.clientX;
  const 
styles window.getComputedStyle(col);
  
parseInt(styles.width10);
  
document.addEventListener("mousemove"mouseMoveHandler);
  
document.addEventListener("mouseup"mouseUpHandler);
 };

 const 
mouseMoveHandler = function(e) {
  const 
dx e.clientX x;
  
col.style.width = `${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

Uneinheitliches Design
Einheitliches Design ist wichtig, da die Besucher ansonsten die Orientierung verlieren und nicht mehr wissen, ob sie sich überhaupt noch auf Ihrer Seite befinden.
Aufgrund des Wiedererkennungswertes und nicht zuletzt der damit verbundenen Arbeitserleichterung, empfiehlt es sich, ein und dasselbe Layout für alle Seiten zu verwenden.