How simplify css style for tables

Question

I have a css code I want to improve. Actually this code was copy-pasted from Chrome styles inspector. But I'm stuck with trying to simplify it into one rule using nesting to get "clean" styles:

.table > thead > tr > th, .table > thead > tr > td,
.table > tbody > tr > th, .table > tbody > tr > td,
.table > tfoot > tr > th, .table > tfoot > tr > td {
  border-top: 1px solid #000;
}

Is there a way to make it simplier?

score 6 · Accepted Answer · answered May 26 '16 at 11:38

6

In table we find <th> and <td> in <thead>, <tbody> and <tfoot> and in above css all the things are targeted so why not simply use this

.table th, .table td{
  border-top: 1px solid #000;
}

This will also target all <th> and <td> in table.

answered May 26 '16 at 11:38

Gaurav Aggarwal

9,809
6
36
74

score 3 · Answer 2 · answered May 26 '16 at 11:39

3

You can omit middle part as you are selecting all parts from table

.table th,
.table td {
    border-top: 1px solid #000;
}

answered May 26 '16 at 11:39

Justinas

41,402
5
66
96

score 2 · Answer 3 · answered May 26 '16 at 11:43

.table th,
.table td {
    border-top: 1px solid #000;
}

If you wants to target th inside thead then you can use

.table thead th,
.table thead td {
    border-top: 1px solid #ccc;
}

Same is with tbody and with tfoot. If you wants to override something inside them then you can do as follows:

.table tbody th,
.table tbody td {
    border-top: 1px solid #ddd;
}
.table tfoot th,
.table tfoot td {
    border-top: 1px solid #eee;
}

How simplify css style for tables

3 Answers3