0

im trying to reduce lines of css and i cant figure out on how to do it. I have 2 tables and i want to style both with same styles and their's TD and TH too.

I have read, Multiple classes in CSS Selector , Multiple two-classes css-selector? , css multiple class / id selectors? , CSS selector for multiple sub-elements

What i have:

So 2 tables same styles. This is ok, it works.

  .documents_table, #documento_detalhe {
     font-family: 'Roboto', sans-serif;
     border-collapse: collapse;
     width: 100%;
  }

But now how to select both tables and theirs TDs and THs?

This doenst work:

.documents_table, #documento_detalhe td, th {
   border: 1px solid #dddddd;
   text-align: left;
   padding: 8px;
   border:0;
 }

This is what i have but i want to reduce lines:

.documents_table td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    border:0;
}

#documento_detalhe td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
    border:0;
}
BRABO
  • 100
  • 7

1 Answers1

1

You should know that by writing .documents_table td, th, { styles } The styles are applied to all td inside .documents_table and to ALL th from your html. Not just the ones in the .documents_table . Your selector should be .documents_table td, .documents_table th

Having said that, to style the td and ths from both tables you should write

 .documents_table td, 
.documents_table th, 
#documento_detalhe td, 
#documento_detalhe th { 
...styles 
}

BUT, it would be better to add a common class to both tables like '.my-table' and so you would write just .my-table td, my-table th { styles } and it would apply to both.

See below

.my-table th, .my-table td {
    color:red;
 }
<table id="documento_detalhe" class="my-table">
  <tr><th>TH #documento_detalhe<th></tr>
  <tr><td> TD #documento_detalhe<th></tr>
</table>

<table class="documents_table my-table">
  <tr><th>TH documents_table<th></tr>
  <tr><td> TD documents_table<th></tr>
</table>
Mihai T
  • 16,767
  • 2
  • 20
  • 32
  • ye i tought about creating a class and apply to all tables, but i got curious on what was the best approach to it. Thanks – BRABO Jul 08 '21 at 11:46
  • @BRABO if ALL the tables you use should have the same styling. Just use the tag selector `table td, table th` . No need for a common className. Again, be careful that `.my-class td, th` won't style only the `th`'s from table `.my-class` but it will style ALL the `th`s from your page. Good luck ! – Mihai T Jul 08 '21 at 11:47