无法更改 table 边框半径 css

Question

我正在尝试更改 css 上的左上角和右上角边框半径，但它没有做任何事情，我尝试将 ID 和 table 本身作为目标，但没有任何效果正在工作我希望有人能指出我做错了什么，我只是在我的实际 html 模板

中根本看不到它有任何变化

这是我的示例代码

   <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;  
}

Answer 1

您缺少边框宽度、样式和颜色。我在下面添加了一个示例。

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>

Answer 2

您需要在 header 中的第一个 TD 添加以下 CSS。

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

于是就变成了

#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>

无法更改 table 边框半径 css

unable to change table border radius css

css

html-table