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;
}
CodePudding user response：
You just tried to on wrong id.
I changed your table background to see changes more clear.
table{
background: grey;
border-top-left-radius: 10px;
}
#flightsHeader{
height: 3em;
background-color: #2E9CFE;
color: white;
}
#firstTableHeader {
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>CodePudding user response：
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>CodePudding user response：
You are missing the border width, style and color. I added an example below.
table { /* this is if you want border radius for the table */
/*border: 1px solid;*/
border-top-left-radius: 10px;
}
#flightsHeader {
height: 3em;
border-top-left-radius: 10px;
background-color: #2E9CFE;
color: white;
}
#flightsHeader td:first-child{/* this is if you want border radius for the first <td> in the header */
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>