Responsive Tables in Pure CSS
Clever hack using data-attributes to assign labels to cells.
It's still a massive duplication of code (labels), but better and more lightweight than most solutions I've seen for this surprisingly tricky problem.
Related cards:
hint.css - A tooltip library in CSS
A tooltip library that does not use Javascript. Works in IE9+.
This library (or the technique used by it) could be a great choice for projects with a lot of tooltips, which are hard to do fast with Javascript.
CSS box-shadow not working in IE9 inside tables with collapsing borders
Though Internet Explorer 9 supports the box-shadow CSS property there is a nasty bug which sometimes prevents it from rendering the shadow properly.
Consider this HTML:
<table style="border-collapse: collapse">
<tr>
<td>
...
Give table columns equal width using CSS
If you want to distribute a <table>'s width equally over its columns, you can use the following CSS property:
table-layout: fixed
It is supported by every browser ever.
CSS: Vertically center with display: table-cell
The classical scenario: There's a parent div element and you want to center some arbitrary child element vertically inside of it. Here's how you do it (also try this jsfiddle).
The children need to be block elements....
Prevent long strings from stretching your <table> with CSS
- Give the table a style
table-layout: fixed - Give the cells in the first row a width
- The same width will be automatically used for following rows
The top responsive web design problems ... and how to avoid them
I recently created a survey asking fellow designers about the problems they faced when creating fully responsive sites. This article will list the most common problems they reported and offer possible solutions, along with suggestions to conside...
Pure CSS Timeline | CSSDeck
Clever hack to allow user interaction without Javascript (by using radio buttons and selecting on :checked).
Sticky table header with jQuery
When you want the table headers to always stay around (e.g. because that table is huuuge), use the code below.
Style
table.fixed_table_header{
position: fixed;
top: 0;
width: auto;
display: none;
border: none;
margin: 0;
}
`...
JQuery CSS Emoticons Plugin
The CSS Emoticons plugin is a simple jQuery plugin (and stylesheet) that allows you to turn any text emoticons on the page into cute little smiling faces with pure CSS3 styling (no images whatsoever).