unable to change table border radius css

Issue

I’m trying to change my top left and right border radius on my css but its not doing anything, I have tried targeting the IDs and the table itself and the but nothing is working I’m hoping someone can point out what I’m doing wrong, I’m just not seeing it change at all in my actual html template

heres my code for an example

   <table id="flightsContainer">
                <tr id="flightsHeader">
                <td id="firstTableHeader"><b>FLIGHT INFO</b></td>
                <td><b>DEPART</b></td>
                <td><b>RETURN</b></td>
                <td><b>TRAVELER</b></td>
                <td><b>STATUS</b></td>
                <td><b>TOTAL</b></td>
                </tr>
         
                  <tr v-for="flight in pageOfItems" :key="flight.id">
                      
                      <td>
                        <section id="flightsAgency">
                            
                                <div>
                                    <img src="../assets/agency1.png"/>
                                </div>
                            <div>
                                <small>Booking No:</small>
                                <b><p>{{flight.booknum}}</p></b>
                            </div>
                        </section>
                    </td>

                    <td>
                    <section>
                          <small>{{flight.departDate}}</small>
                          <b><p>{{flight.departLocation}}</p></b>
                    </section>
                    </td>
                    
                    <td>
                     <section>
                          <small>{{flight.returnDate}}</small>
                          <b><p>{{flight.returnLocation}}</p></b>  
                    </section>
                    </td>

                    <td>
                    <section>
                          <small>{{flight.travelerType}}</small>
                          <b><p>{{flight.travelerAge}}</p></b>
                    </section>
                    </td>

                    <td>
                    <section>
                          <b><p  class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
                    </section>
                    </td>

                    <td>
                    <section>
                            <small>USD</small>
                          <b><p>{{flight.total}}</p></b>
                    </section>
                    </td>

                </tr>
    
            </table>

table{
      border-top-left-radius: 10px;
}
#flightsHeader{
    height: 3em;
    border-top-left-radius: 10px;
    background-color: #2E9CFE;
    color: white;  
}

Solution

You need to add the following CSS to the first TD in the header.

border: 1px solid #2E9CFE;
border-top-left-radius: 10px;

So it becomes

#flightsHeader{
    height: 3em;
    background-color: #2E9CFE;
    color: white;  
}

#firstTableHeader {
    border: 1px solid #2E9CFE;
    border-top-left-radius: 10px;
}

 <table id="flightsContainer">
                <tr id="flightsHeader">
                <td id="firstTableHeader"><b>FLIGHT INFO</b></td>
                <td><b>DEPART</b></td>
                <td><b>RETURN</b></td>
                <td><b>TRAVELER</b></td>
                <td><b>STATUS</b></td>
                <td><b>TOTAL</b></td>
                </tr>
         
                  <tr v-for="flight in pageOfItems" :key="flight.id">
                      
                      <td>
                        <section id="flightsAgency">
                            
                                <div>
                                    <img src="../assets/agency1.png"/>
                                </div>
                            <div>
                                <small>Booking No:</small>
                                <b><p>{{flight.booknum}}</p></b>
                            </div>
                        </section>
                    </td>

                    <td>
                    <section>
                          <small>{{flight.departDate}}</small>
                          <b><p>{{flight.departLocation}}</p></b>
                    </section>
                    </td>
                    
                    <td>
                     <section>
                          <small>{{flight.returnDate}}</small>
                          <b><p>{{flight.returnLocation}}</p></b>  
                    </section>
                    </td>

                    <td>
                    <section>
                          <small>{{flight.travelerType}}</small>
                          <b><p>{{flight.travelerAge}}</p></b>
                    </section>
                    </td>

                    <td>
                    <section>
                          <b><p  class="pending" v-bind:class="{ pending: flight.isPending, cancelled: flight.isCancelled, complete: flight.isComplete}">{{flight.status}}</p></b>
                    </section>
                    </td>

                    <td>
                    <section>
                            <small>USD</small>
                          <b><p>{{flight.total}}</p></b>
                    </section>
                    </td>

                </tr>
    
            </table>

Answered By – Jobin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0