JavaScript - HTML-Tabelle Spaltenbreite anpassen

In dieser Tabelle kann die Breite der Spalten individuell geändert werden.

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.

<label> Etikett

CSS - Bilder in einem Formular auswählen

PHP - Zufälliges Wort ausgeben und Konsonanten zählen

JavaScript - Audiodateien per Button-Klick abspielen

MySQL - Das Alter von Personen ermitteln