Skip to main content

CSS for Tables

Tables still have a place--for tabular data. Duh. Such as the Companies table in FDB. But I had to remember the CSS around tables.

First, the basic structure:

table
  thead
    tr
      th
  tbody
    tr
      td

Table

border-collapse: { separate (default) | collapse }
border-spacing: { #both | #horiz #vert } - default is 1px
empty-cells: { show (default) | hide }
table-layout: { auto (default) | fixed } - fixed is like !important for widths

For a responsive table, put it inside a container (e.g., div) with overflow-x: auto;

Width, height, border can be applied to table, th and td--not tr, thead or tbody.

Cells

th and td tags. CSS doesn't seem to like naked th and td. Prefer table td or table th selectors.

text-align: { left | center | top }
vertical-align: { top | bottom | middle }
padding
(margin doesn't do anything; use border-spacing)
border-bottom: - for just horizontal lines between rows

Rows

For a mouse-over to select whole rows at a time:
tr:hover { background-color: yellow; }

For alternating row colors:
tr:nth-child(even): { background-color: #f2e0f2; }

Comments

Post a Comment

Popular posts from this blog

Why table join doesn't work

Everything in the traditional relational database world is based on tables. If I have a table of Classes and a table of Students, I can have an association table that tells me who's in which class. classId className instructor 1 Psych 101 Dr. Jung studentId firstName lastName 1 Molly Ringwald 2 Anthony Hall 3 Joan Cusack Clearly, these two tables tell me nothing about which classes Molly is taking, nor which students have signed up for Psych 101. An "association" table provides that information: classId studentId Association-specific notes 1 1 1 2 late add 1 3 In the relational world, a LEFT JOIN gives us the student list for a given class: className instructor firstName lastName Assn notes Psych 101 Dr. Jung Molly Ringwald Psych 101 Dr. Jung Anthony Hall late add Psych 101 Dr. Jung Joan Cusack This approach is "pure" from a Chris Date perspective, but when we're talking about JSON data in response to a RESTful HTTP r...
Post a Comment
Read more

JSON/MySQL Schemas

As noted previously, there is a lot of overlap between the RDBMS world and the JSON world. Identifiers JSON is defined to allow identifiers of any kind of Unicode string, encoded in UTF-8 (or UTF-16, etc.). They begin and end with double quotation marks (U+0022), so included quotation marks and '\' must be escaped as \" or \\. Control characters (ASCII 0-x1F) must be escaped as well. In practice, JSON identifiers conform to ECMAScript standards . There are some 68  reserved keywords (function, import, for, if, else, and so on) that should not be used as identifiers. Unexpected reserved words include abstract, await, debugger, delete, finally, instanceof, super, synchronized, transient, volatile, and yield. The spec makes a distinction between identifiers and IdentifierNames (specifically, array keys), but why risk it? ECMAScript allows '$' and '_' anywhere in an identifier. Length or camelCasing are not part of the spec. As for length, there seems t...
Post a Comment
Read more

Relational Updates

The pattern I've been focused on for some time is the classic 'students in classes' or 'passengers on flights' problem. The database has a table of students and a table of classes and an association table which joins them. That's basic stuff. The problem is how do you update a student to edit her list of classes, or update a class to edit its list of students? The relational integrity is not a problem--if you delete a class from the student, that student no longer appears in the class' list of students. The problem is your simple form gets very complicated. Instead of a form that displays the columns of a single row in a table, now we have three tables involved. Of course it's solvable, but we want it to be intuitive for the end user. Old time software punted the problem--you could edit the association table, or a class, or a student, but you couldn't add classes to a student. What we want is a list of classes on the student record. Each class ...
Post a Comment
Read more