Here is the list of various display values, along with their behaviour. The various display values in CSS determine how the web page layout would look.

$(this).find('thead th').This blog will go through the various values for CSS display property and describe how it affects the web page layout. Create an array containing all table headers I decided to use a data attribute as the content source for the pseudo-element.įirst, create a “data-label” attribute and attach it to every with a bit of JavaScript/jQuery:

It had to work for variable table layouts and.

If the composition of your table is always the same, you might just define the label content row by row, directly in your stylesheet:įor my use case I needed the labels to be dynamic: I decided to use pseudo-elements:īackground: transparentize( #58C25F, 0.9 ) Īt this point the pseudo-element still has no content.

On to the individual table cells, basic styling first:īorder: 1px solid transparentize( #58C25F, 0.5 ) Style the table rows to look like individual cards:īackground-color: transparentize( white, 0.15 ) īox-shadow: 0 0 1rem transparentize( black, 0.9 ) (There is some SCSS sprinkled in here and there, but you can do the exact same thing with plain CSS as well.) Let’s have a look on how to get from A to B. Each cell gets a label that corresponds to its table header. I suggested a card-like layout for each table row, that looks something like this: Figure B: Alternate, card-like table layout with more room for the last column.

Again, keep in mind, that on the client’s website the last column contained much more content, than in this example. The regular table styling looks something like this: Figure A: Regular table layout. In addition, the tables were created automatically, with little influence on the composition of the tables in terms of classes, IDs or custom attributes, so using another HTML structure was not possible either. (Keep that in mind, while I use dummy content and a more generic styling in my explanation below.) The typical table styling was not cutting it, because the last column of said tables contained way more content than all the other columns. A client needed a more readable design for some of the tables on their website.

Css display table cell margin