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

<map> Verweis-sensitive Grafik

CSS - Hintergrundbild absolut positionieren

PHP - Einfache Bannerrotation

JavaScript - https und den Querystring aus der URL entfernen

MySQL - Datensatz Wert erhöhen

Rechtsklick verboten!
Einen Rechtsklick mit der Maustaste zu verbieten, zum Beispiel mit Javascript, ist nicht originell, sondern dumm. Mit dem Rechtsklick kann man das Kontextmenü anzeigen lassen, und die Homepage zu den Favoriten hinzufügen, oder die Seite ausdrucken. Den Quelltext kann man nicht mit Javascript schützen, denn es gibt viele Wege und Mittel, um an diesen zu gelangen. Sollte man sensible Daten ins Internet stellen?