HTML table tricks

Need to show tables?

HTML tables, some people love them, some people hate them. But there are surely quite some tricks we can do about it.

selectable columns

Modified from DBMS comparison, when we have checkboxes such as input#on-category with the id, we can toggle the display of the table columns with this

body:not(:has(input#on-category:checked)) table.toggle tr :nth-child(1),
body:not(:has(input#on-name:checked))     table.toggle tr :nth-child(2),
body:not(:has(input#on-type:checked))     table.toggle tr :nth-child(3),
body:not(:has(input#on-use:checked))      table.toggle tr :nth-child(4) {
  display: none;
}

Note: Please be aware of that, if there are cells with colspan, toggling the column containing first cell will remove the entire row. For example, toggling Column Name will entirely remove the Polysporin row below.

Sticky table heads

To make the table head always stay even under scrolling, please use CSS tricks on position. It’s very useful for the long tables.

table {
	width: 100%;
	position: relative;
	border-collapse: collapse;
}

th {
	ackground: white;
	position: sticky;
	top: 0;
}

Example: CIDR notation(Classless Inter-Domain Routing) table.

ps. There are some range of IPv4 address reserved for special uses.