Caleb Taylor
Caleb Taylor

Reputation: 3230

CSS table border-bottom not showing

My goal is to add a bottom white line border under the heading in css as such shown in this picture table image. However the border is not appearing. I was watching and coding along a youtube tutorial on html and css. My results were fine until I reached the part where he added the bottom white line border tutorial video at 1hr34min45sec. When I placed the bottom border, it didn't appear.

Any help would be appreciated

.tile {
    width: 170px;
    border-radius: 2%;
    height: 140px; 
    padding:  20px;
    margin: 5px;
    float:left;
    
}

.tile-double {
    width: 390px;
    height: 140px;
    margin: 5px;
    padding: 20;
    float: left;
    
}
.orange {
    background-color: #e61860;
}


#user-table {
    border-collapse: collapse;
    margin: 10px auto;
    font-weight: normal;
    width: 100%;
    
}

#user-table th{
    border-collapse: collapse;
    border-bottom: 1xp solid #F6F6F6;
    padding 2px;
    text-align: center;s
}

#user-table td{
    padding: 2px;
    text-align: center;
}
            <div class="tile orange tile-double">
                <table id="user-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Product</th>
                            <th>Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>FruitDealer</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>DongRaeGu</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>July</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                    </tbody>
                </table>
            </div>

Upvotes: 2

Views: 12255

Answers (4)

Amit Teli
Amit Teli

Reputation: 935

In my case, the user-agent style was overriding my css class with border-collapse property. So I had to override it using

    table {
        border-collapse: collapse;
    }

Upvotes: 4

Ayub Ali
Ayub Ali

Reputation: 55

Okay I checked out your css there are minor errors in it check out

#user-table th{ border-collapse: collapse; border-bottom: 1xp solid #F6F6F6; --- should be 1px not 1xp this one here was your main problem this is why the border didn't show up

    padding 2px;   ----- incorrect should be paddin: 2px;
    text-align: center;s --- the s shouldn't be there
}

.tile {
    width: 170px;
    border-radius: 2%;
    height: 140px; 
    padding:  20px;
    margin: 5px;
    float:left;
    
}

.tile-double {
    width: 390px;
    height: 140px;
    margin: 5px;
    padding: 20;
    float: left;
    
}
.orange {
    background-color: #e61860;
}


#user-table {
    border-collapse: collapse;
    margin: 10px auto;
    font-weight: normal;
    width: 100%;
    
}

#user-table th{
    border-collapse: collapse;
    border-bottom: 1xp solid #F6F6F6;
    padding 2px;
    text-align: center;s
}

#user-table td{
    padding: 2px;
    text-align: center;
}
            <div class="tile orange tile-double">
                <table id="user-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Product</th>
                            <th>Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>FruitDealer</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>DongRaeGu</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>July</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                    </tbody>
                </table>
            </div>

.tile {
    width: 170px;
    border-radius: 2%;
    height: 140px; 
    padding:  20px;
    margin: 5px;
    float:left;
    
}

.tile-double {
    width: 390px;
    height: 140px;
    margin: 5px;
    padding: 20;
    float: left;
    
}
.orange {
    background-color: #e61860;
}


#user-table {
    border-collapse: collapse;
    margin: 10px auto;
    font-weight: normal;
    width: 100%;
    
}

#user-table th{
    border-collapse: collapse;
    border-bottom: 1xp solid #F6F6F6;
    padding 2px;
    text-align: center;s
}

#user-table td{
    padding: 2px;
    text-align: center;
}
            <div class="tile orange tile-double">
                <table id="user-table">
                    <thead>
                        <tr>
                            <th>User</th>
                            <th>Product</th>
                            <th>Score</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>FruitDealer</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>DongRaeGu</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                        <tr>
                            <td>July</td>
                            <td>Razor Banshee</td>
                            <td>100%</td>
                        </tr>
                    </tbody>
                </table>
            </div>

Upvotes: 0

Bribbons
Bribbons

Reputation: 413

Try targeting the tr of the thead so the border fills the full width of your table.

    thead tr { border-bottom: 1px solid #FFF; }

Upvotes: 1

DeFeNdog
DeFeNdog

Reputation: 1210

Try to run your code through those validators, specifically:

border-bottom: 1xp solid #F6F6F6; /* shows xp instead of px (pixels) */

https://validator.w3.org/ -- for HTML

https://jigsaw.w3.org/css-validator/ -- for CSS

Upvotes: 1

Related Questions