无法更改表格边框半径css答案

【问题标题】：unable to change table border radius css无法更改表格边框半径css
【发布时间】：2021-11-17 09:32:42
【问题描述】：

我正在尝试更改我的 css 上的左上角和右上边框半径，但它没有做任何事情，我尝试定位 ID 和表格本身，但没有任何工作我希望有人能指出什么我做错了，我只是在我的实际 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;  
}

【问题讨论】：

标签： css html-table

【解决方案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>

【讨论】：

【解决方案2】：

你需要在表头的第一个 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>

【讨论】：