Table CSS: Wrap long links and nothing else

Share & showcase
,
1

Today I found myself horizontally scrolling through a superwide table after I pasted a long link into it. I don’t mind scrolling to get important data, but seeing the scrollable region extend well beyond the limits of my screen, just in case I needed to read a long string of random base64 letters gave me the aesthetic heebie-jeebies.

Bleh.

Unfancy table
Unfancy table2534×410 29.7 KB

Of course I could a bit of custom css to word-break: break-word; the entire table, but that would cause my header lines to break to multiple lines in the middle of a word, just because of one long URL somewhere in my table.

So let’s only break words on long URLs in table cells:

table td:has(a) {
    word-break: break-word;
}

Add a couple more tweaks to keep our table cells a comfortable reading width:

table td div {
    min-width: 10em;
}
table td:has(a) div {
    min-width: 20em;
}

Plus a slightly modified Latex table styling from https://forum.obsidian.md/t/obsidian-tables-that-look-like-latex-tables-with-css/16683:

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: auto;
	max-width: 100%;
	border-top: 2.27px solid black;
	border-bottom: 2.27px solid black;
	overflow-x: auto; 
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
th,
td {
	border: 0 none !important;
	text-align: left;
	padding: 0.5rem;
	line-height: 1.1;
}
table td, table th {
    border-right: .5px dashed grey !important;
}
table tr td:last-child, table th:last-child {
    border-right: 0 none !important;
}
table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
	border-top: 1.36px solid black !important;
}
table > tbody > tr:last-child > td,
table > tbody > tr:last-child > th {
	border-bottom: 1.36px solid black !important;
}
thead th {
    background-color: white !important;
    font-weight: 700;
}
table tr:nth-child(even):not(:hover) { background-color: #eee; }
table tr:nth-child(odd):not(:hover) { background-color: #ddd ; }

and I’ve achieved my own personal table nirvana

Fancy Table
Fancy Table2506×320 31.7 KB

2

Slightly modified table theme, plus dark mode support. Full css file:

table td:has(a) {
    word-break: break-word;
}
table td div {
    min-width: 10em;
}
table td:has(a) div {
    min-width: 20em;
}

/* Latex table */
/* ------------------------------------*/
table {
	border-collapse: collapse;
	border-spacing: 0;
	width: auto;
	max-width: 100%;
	border-top: 2.27px solid black;
	border-bottom: 2.27px solid black;
	overflow-x: auto; 
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
th,
td {
	border: 0 none !important;
	text-align: left;
	padding: 0.5rem;
	line-height: 1.1;
}
table td, table th {
    border-right: .5px dashed grey !important;
}
table tr td:last-child, table th:last-child {
    border-right: 0 none !important;
}
table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
	border-top: 1.36px solid black !important;
}
table > tbody > tr:last-child > td,
table > tbody > tr:last-child > th {
	border-bottom: 1.36px solid black !important;
}
thead th:not(:hover) {
    background-color: #eee !important;
}
table tr:nth-child(even) td:not(:hover) { background-color: #eee; }
table tr:nth-child(odd) td:not(:hover) { background-color: #ddd ; }

.theme-dark table {
    border-top: 2.27px solid #bbb;
    border-bottom: 2.27px solid #bbb;
}
.theme-dark table > tbody > tr:first-child > td,
.theme-dark table > tbody > tr:first-child > th {
	border-top: 1.36px solid #bbb !important;
}
.theme-dark table > tbody > tr:last-child > td,
.theme-dark table > tbody > tr:last-child > th {
	border-bottom: 1.36px solid #bbb !important;
}
.theme-dark thead th:not(:hover) {
    background-color: #333 !important;
}
.theme-dark table tr:nth-child(even) td:not(:hover) { background-color: #333; }
.theme-dark table tr:nth-child(odd) td:not(:hover) { background-color: #3B3B3B; }
/* ------------------------------------*/