Border not working as expected for thead tr

Question

I want the whole of a row in the thead to have a specified border but it is not working as expected when I am using border styling attribute. But it is working using outline attribute. Here is a code snippet:

table.table, table.table * {
   border: none !important;
  }

table.price-table thead tr {
   border: 10px solid blue;
   outline: thin solid red;

  
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table price-table">
  <thead>
    <tr>
      <th>Ticket Type</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr data-ticket-id=1>
      <td class="category-ticket">Adult</td>
      <td class="price-ticket">RM 20</td>
    </tr>



    <tr data-ticket-id=3>
      <td class="category-ticket">Child</td>
      <td class="price-ticket">RM 15</td>

    </tr> 



  </tr>                
</tbody>
</table>

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

Using border: none !important; overrides your second border declaration. The use of !important is not recommended unless it is strictly necessary. It makes maintainability a lot harder. For more information see here.

edited May 23 '17 at 12:01

Community

1
1

answered Mar 07 '16 at 06:54

Daniel Higueras

2,404
22
34

1

I don't need it either. I was doing it for testing. Thanks for the catch. Very helpful! – geckob Mar 07 '16 at 06:58

score 1 · Answer 2 · answered Mar 07 '16 at 06:55

Remove following css:

table.table, table.table * {
            border: none !important;
        }

The above css will effect to not display border. Because you have given table.table * So, it will target all the elements of the table. and you have given !important so, no other css will override the none css.

table.price-table thead tr {
   border: 10px solid blue;
   outline: thin solid red;

  
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table price-table">
  <thead>
    <tr>
      <th>Ticket Type</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr data-ticket-id=1>
      <td class="category-ticket">Adult</td>
      <td class="price-ticket">RM 20</td>
    </tr>



    <tr data-ticket-id=3>
      <td class="category-ticket">Child</td>
      <td class="price-ticket">RM 15</td>

    </tr> 



  </tr>                
</tbody>
</table>

score 1 · Answer 3 · answered Mar 07 '16 at 06:55

Your this styling

table.table, table.table * {
            border: none !important;
        }

is over-riding all elements border styling to none beacuse of * you used. So if you want to apply please change this property to something you want. And please avoid using !important unless it is too important and you want to over-write some library or framework default styling.

score 1 · Answer 4 · answered Mar 07 '16 at 06:56

Try this as your css:

table.table, table.table * {
    }

table.price-table thead tr {
    border: 1px solid red;
    outline: thin solid red;
}

check it working: https://jsfiddle.net/Aschab/6p6kht43/

As an advice, if you need !important for your css to work, you're doing it wrong. Think outside the box

Border not working as expected for thead tr

4 Answers4