使 Bootstrap “Table” “Table-Hover” 突出显示底部边框左侧之外

Question

我有一张使用 Bootstrap 的“table”和“table-hover”类的表格

缩略图图像必须与底部边框的左侧齐平，如下图所示：（抱歉，这张图片很尴尬——我必须增加我的 StackOverFlow 代表才能发布图片）。

当鼠标悬停在一行上时，激活 table-hover 类，蓝色高亮效果应该与底部边框的右侧齐平，但超出底部边框左侧约 20px。

实际上，您需要在我的公共投递箱中查看 2 张图片（没有足够的声誉点来发布两个链接）Click here to view images

请参阅以下 JSFiddle，了解我迄今为止所做的工作：JSFiddle

非常感谢您提供的任何帮助！

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div class="col-sm-10" id="Table">
    <table class="table table-hover">
        <!-- <thead>
            <tr>
                <th></th>
            </tr>
        </thead> -->

        <tbody>
            <tr>
                <td>
                    <div>
                        <img class="pull-left" id="thumbnail" src="http://a.abcnews.com/images/Technology/ht_new_planet_lpl_120718_wmain.jpg" style="height:100px; width:100px;">
                        <div id="searchResultHeading">                          
                            <h5>Heading Black then white on row hover</h5>
                        </div>                      
                            <span>some info grey then white on hover</span> &nbsp; &nbsp; 
                            <span>some info grey then white on hover</span> <br>
                            <span>some info grey then white on hover</span> &nbsp;  &nbsp; 
                        <div class="pull-right table-hover" id="downloadButton">
                            <a href="#"> 
                                <i class="fa fa-cloud-download"></i> Download
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <img class="pull-left" id="thumbnail" src="http://a.abcnews.com/images/Technology/ht_new_planet_lpl_120718_wmain.jpg" style="height:100px; width:100px;">
                        <div id="searchResultHeading">                          
                            <h5>Heading Black then white on row hover</h5>
                        </div>                      
                            <span>some info grey then white on hover</span> &nbsp; &nbsp; 
                            <span>some info grey then white on hover</span> <br>
                            <span>some info grey then white on hover</span> &nbsp;  &nbsp; 
                        <div class="pull-right table-hover" id="downloadButton">
                            <a href="#"> 
                                <i class="fa fa-cloud-download"></i> Download
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div>
                        <img class="pull-left" id="thumbnail" src="http://a.abcnews.com/images/Technology/ht_new_planet_lpl_120718_wmain.jpg" style="height:100px; width:100px;">
                        <div id="searchResultHeading">                          
                            <h5>Heading Black then white on row hover</h5>
                        </div>                      
                            <span>some info grey then white on hover</span> &nbsp; &nbsp; 
                            <span>some info grey then white on hover</span> <br>
                            <span>some info grey then white on hover</span> &nbsp;  &nbsp; 
                        <div class="pull-right table-hover" id="downloadButton">
                            <a href="#"> 
                                <i class="fa fa-cloud-download"></i> Download
                            </a>
                        </div>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

body, html {
height: 100%;
min-height: 100%;
}
a {
    color: #22c7fa;
}

#thumbnail {
    padding-left:0px;
    padding-right:5px;
}

.table.table-hover > tbody > tr > td:hover {
    background-color: #22c7fa;
    color: #fff;
}
.table.table-hover > tbody > tr > td > i {
    color: #inherit;
}
.table.table-hover > tbody > tr > td > div > a {
    color: inherit;
}
#downloadButton > a{
    color:inherit;
}

#table > table {
    margin-left: 97px;
    margin-right: 60px;
    overflow: auto;
    overflow-y: auto; 
}
/*Make all text in the search results grey*/
#Table > table > tbody > tr > td {
    padding-left: 0px !important;
    color: #919191;
}
/*Make the headings in the search results black*/
#searchResultHeading {
    color:#323333;
}
/*Make all text in the search results turn white on hover*/
#Table > table > tbody > tr > td:hover {
    padding-left: 0px !important;
    color: #fff !important;
}
#Table > table > tbody > tr > td:hover h5 {
    color: #fff;
}
/* Indent the search results details */
#Table > table > tbody > tr > td > div > span {
    padding-left: 6px;
    font-weight: 200;
}

Answer 1

首先，删除 CSS 中的那些 !important 标志，它破坏了特殊性（如果这是您的目的，父 id 应该足以获得更多的特殊性）。然后你要为它添加这条规则：

#Table .table.table-hover > tbody > tr:hover > td:first-child{
    padding-left: 20px;
}

也许会添加一点过渡：

.table.table-hover > tbody > tr > td{
    -webkit-transition: all .3s ease;
}

https://jsfiddle.net/L2ugrhpf/1/