html - 为什么不显示底部边框

Question

CSS

.fla {
    float: left;
}

.BookingConfirmationRoomType {
    width: 100%;
    font-size: 13px;
    text-align: center;
    border: 1px solid #0081bc;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead {
    width: 100%;
    font-weight: 700;
    background-color: #0081bc;
    color: #fff;
    line-height: 25px;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeList {
    border-bottom: 1px solid #0081bc;
    width: 100%;
    font-weight: 400;
}

.BookingConfirmationRoomType tbody {
    float: left;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeList .ConfirmRoomImage {
    width: 40px;
    margin: 5px;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeList .ConfirmRoomImagebox {
    width: 5%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead .ConfirmRoomType {
    width: 25%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead .ConfirmName {
    width: 20%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead .ConfirmOccupancy {
    width: 10%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead .ConfirmRefundable {
    width: 15%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead .ConfirmStatus {
    width: 10%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeHead .ConfirmExtra {
    width: 15%;
}

.BookingConfirmationRoomType .BookingConfirmationRoomTypeList a {
    width: 100%;
    color: #0081bc;
}

HTML

<div class="bookingconfirmationroomdis">
    <table cellpadding="0" cellspacing="0" class=
    "BookingConfirmationRoomType fla">
        <tr class="BookingConfirmationRoomTypeHead">
            <th class="ConfirmRoomType" colspan="2">Room Type</th>

            <th class="ConfirmName">Name</th>

            <th class="ConfirmOccupancy">Occupancy</th>

            <th class="ConfirmRefundable">Refundable</th>

            <th class="ConfirmStatus">Status</th>

            <th class="ConfirmExtra">Extra Info</th>
        </tr>

        <tr class="BookingConfirmationRoomTypeList">
            <td class="ConfirmRoomImagebox"><img alt="room type" class=
            "ConfirmRoomImage" src=
            "IMAGES/bookingconfirmation/confirmationHotel.png"></td>

            <td class="ConfirmName">
                <h4>Double Room Suit</h4>
            </td>

            <td>User Name</td>

            <td>2</td>

            <td>Not Refundable</td>

            <td>Pending</td>

            <td>
                <a href="javascript:void(0);">Room Facility</a> <a href=
                "javascript:void(0);">Room policy</a>
            </td>
        </tr>

        <tr class="BookingConfirmationRoomTypeList">
            <td><img alt="room type" class="ConfirmRoomImage" src=
            "IMAGES/bookingconfirmation/confirmationHotel.png"></td>

            <td>
                <h4>Double Room Suit</h4>
            </td>

            <td>User Name</td>

            <td>2</td>

            <td>Not Refundable</td>

            <td>Pending</td>

            <td>
                <a href="javascript:void(0);">Room Facility</a> <a href=
                "javascript:void(0);">Room policy</a>
            </td>
        </tr>
    </table>
</div>

我试图显示底部边框来tr标记，但为什么它没有显示？

Answer 1

Try this

.BookingConfirmationRoomType .BookingConfirmationRoomTypeList td{
    border-bottom:1px solid #0081bc;  
}