JavaScript - HTML-Tabelle Spaltenbreite anpassen

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

Nr. Vorname Name Alter
1 Andrea Ross 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 und Tabellenkalender


<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.

<kbd> Tastatureingabe

CSS - Beschriftungen und Formularfelder gleichmäßig untereinander setzen

PHP - Nächstgrößeren Zehner finden

JavaScript - Anzahl der Wörter als Fortschrittsbalken anzeigen

MySQL - Datensatz eintragen