. Under it every cell refuses to
wrap, so money, dates, counts and identifiers keep one row each however
narrow the window gets — .table-responsive scrolls instead, which is
the behaviour that was already there for wide tables.
Exactly one column per table carries .col-flex: it absorbs the leftover
width and truncates with an ellipsis. The width:100% / max-width:0 pair
is the standard trick for making a table cell truncate at all — without
max-width:0 the cell sizes to its content and never clips.
Truncated cells carry a native title attribute rather than the .tip
bubble above: .tip positions its bubble absolutely, and the clipping
that makes truncation work would cut the bubble off. */
.table-cols th,
.table-cols td {
white-space: nowrap;
}
.table-cols .col-flex {
width: 100%;
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* A flex cell holding stacked lines (a name over a muted sub-line) needs
the truncation on the lines, not the cell. */
.table-cols .col-flex > .truncate {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tabular figures on the whole table, not just the cells tagged .col-num.
Money and dates line up down a column only if every digit is the same
width, and tagging each | individually would mean the header and its
body cells could drift apart the first time someone adds a column.
Proportional text is unaffected by this. */
.table-cols {
font-variant-numeric: tabular-nums;
}
/* Marks a column as numeric: right-aligned, so the units line up at the
decimal point rather than at the left edge. */
.table-cols .col-num,
.table-cols th.col-num {
text-align: right;
}
/* ── C2 · Striping ─────────────────────────────────────────────────────
Flat tables take Bootstrap's .table-striped directly; there is nothing
to add here.
Master-detail tables — the ones whose rows expand — stay unstriped, and
that is deliberate rather than an omission. Bootstrap stripes on
:nth-child, so an expanded detail row both takes a stripe of its own and
flips the parity of every row beneath it: opening one row visibly
re-paints half the table. The expand affordance and the hover highlight
already carry the row rhythm on those tables.
.row-actions marks a table whose rows are clickable or carry controls,
so the pointer matches the affordance in one place instead of an inline
style per | . */
.table.row-actions > tbody > tr {
cursor: pointer;
}
.table.row-actions > tbody > tr.no-action {
cursor: default;
}