Question

我的目标是在css标题下添加一个底部白线边框，如图table image所示。然而边界没有出现。我在html和css的youtube教程中观看和编码。我的结果很好，直到我到达他添加了底部白线边界tutorial video at 1hr34min45sec的部分。当我放置底部边框时，它没有出现。

任何帮助将不胜感激

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

Answer 1

尝试通过这些验证程序运行代码，具体为：

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

https://validator.w3.org/ - 适用于HTML

https://jigsaw.w3.org/css-validator/ - 用于CSS

Answer 2

在我的情况下，用户代理样式使用border-collapse属性覆盖了我的css类。所以我不得不使用

    table {
        border-collapse: collapse;
    }

Answer 3

尝试定位thead的tr，使边框填满表格的整个宽度。

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

Answer 4

好的，我检查了你的css中有一些小错误检查

＃user-table th { 边界崩溃：崩溃; border-bottom：1xp solid＃F6F6F6; ---应该是1px而不是1xp这个是你的主要问题这就是为什么边界没有出现

git blame -L$row HEAD~1 -- $file

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

CSS表格border-bottom没有显示

4 个答案: