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

GraphQL is the many-to-many solution

Exactly! Regular readers of this blog (me) will appreciate my stumbling attempts to pre-define a REST interface that supports many-to-many interfaces. GET a class, for example, and the return includes an array of the students in that class. In this context, we don't want a full Student record, just the Student's name and Id, for example. With a REST interface, the server writer has to guess how to abbreviate the Student record. GraphQL fixes that. The front end requests just the data it wants. If we want a list of the students in a class and the assigned roommates for that student...we can do that! A lot of my prototype REST service is hardwired--not single tables, so much, but the many-to-many stuff certainly. There was a certain amount of work implementing the simple router ("/table/recordno"). GraphQL means throwing a lot of that away, but I can see immediately that GraphQL's approach is what I want. My schema tables (implementing INSERT and UPDATE) look ...
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

Vue.js

I had the example from a YouTube Tutorial on Vue working, but I'm having a little trouble creating an empty project for my own development. Part of the issue is that Vue is compiled. What you're running is minified (or not) JavaScript that includes a ton of stuff along with your app. So you can write a little, compile it, look at it in a browser (using the WAMP server) and repeat those steps to death, or you can use their system development which automatically compiles and auto-runs when it notices a source code change. vue ui brings up an app (at /localhost:8000) that manages this process, in theory, but I've forgotten the mechanics of it. In the example, we had a tree: public `--src      `--App.vue      `--views      |    `--Home.vue      |    `--About.vue      `--components           `--Todos.vue           `--TodoItem.vue ...
Post a Comment
Read more