Let user resize table columns by dragging the header edges & replace anchor text with its title attribute
// ==UserScript==
// @name Resizable Table Columns & Replace Link Text
// @namespace http://tampermonkey.net/
// @version 1.0.0
// @author aspen138
// @description Let user resize table columns by dragging the header edges & replace anchor text with its title attribute
// @match *://*/*
// @grant none
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// Insert some CSS for the column "grip" that we'll add to each header
const style = document.createElement('style');
style.textContent = `
.column-resize-grip {
position: absolute;
top: 0;
right: 0;
width: 6px; /* Thicker area for easier dragging */
height: 100%;
cursor: col-resize;
user-select: none;
}
th.resizable-header {
position: relative;
}
`;
document.head.appendChild(style);
/**
* Attach grips to each table header so we can drag the column widths.
* @param {HTMLTableElement} table A table element to attach resizing.
*/
function makeColumnsResizable(table) {
const headers = table.querySelectorAll('th');
if (!headers.length) return;
headers.forEach((header) => {
header.classList.add('resizable-header');
// Avoid adding multiple grips if script runs again
if (header.querySelector('.column-resize-grip')) return;
const grip = document.createElement('div');
grip.className = 'column-resize-grip';
header.appendChild(grip);
grip.addEventListener('mousedown', startDragging);
});
function startDragging(event) {
event.preventDefault();
event.stopPropagation();
const headerEl = event.target.parentElement;
const startX = event.clientX;
const startWidth = headerEl.offsetWidth;
document.addEventListener('mousemove', onDrag);
document.addEventListener('mouseup', stopDragging);
function onDrag(e) {
const dx = e.clientX - startX;
headerEl.style.width = `${startWidth + dx}px`;
}
function stopDragging() {
document.removeEventListener('mousemove', onDrag);
document.removeEventListener('mouseup', stopDragging);
}
}
}
/**
* Replace the truncated link text with its full "title" attribute.
* @param {HTMLTableElement} table A table element containing anchors with a title attribute.
*/
function replaceLinkTextWithTitle(table) {
const anchors = table.querySelectorAll('a[title]');
anchors.forEach(anchor => {
anchor.textContent = anchor.getAttribute('title');
});
}
window.addEventListener('load', function() {
// Modify the selector below to match your table's selector
const table = document.querySelector('.t-tablelist');
if (table) {
makeColumnsResizable(table);
replaceLinkTextWithTitle(table);
}
});
})();