Question

我有一张没有固定table宽度且viewport宽度设置为100％的表格。我想要修复表头。我找到了许多固定宽度的解决方案，如下所示：symfony documentation

但它对流体宽度表不起作用，当你减小<table class="delegations-table"> <thead> <tr class="del-head"> <th>Région</th> <th>Ville / Quartier</th> <th>Lien</th> </tr> </thead> <tbody> <tr> <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td> <td><a href="#">Délégation de Rabat</a></td> <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td> </tr> <tr> <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td> <td><a href="#">Délégation de Sale</a></td> <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td> </tr> <tr> <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td> <td><a href="#">Délégation de Temara</a></td> <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td> </tr> <tr> <td><a href="#">Région de Rabat-Salé-Zemmour-Zaer</a></td> <td><a href="#">Délégation de Touraga</a></td> <td><a href="#"><img src="img/icons/del-icon.png" alt="" /></a></td> </tr> </tbody> </table>大小时，它无法实现功能。

有什么方法可以实现响应式固定宽度标题？

我的HTML是这样的：

.del-contain {
    max-height: 260px;
    width: 100%;
    overflow: auto;
}   

.delegations-table {
    width: 94%;
    margin: auto;
    position: relative;
}

.delegations-table th {
    color: #FFF;
    font-family: 'Open Sans', sans-serif;
    font-size: 15px;
    padding-left: 18px;
    line-height: 2;
}

.delegations-table tr td a {
    display:block;
    height:100%;
    width:100%;
}

.delegations-table tr.del-head {
    background: #3b8d3c!important;
}

.delegations-table td {padding: 5px 0 10px 18px;}
.delegations-table tr:hover {background: #ededed;}
.delegations-table td a {color: #000;}
.delegations-table td a:hover {text-decoration: none;}

我的CSS如下：

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<!-- Généré par Microsoft Visio 11.0, SVG Export, v1.0 A_QI_QCompliance_ICompliance_AAfr.svg Compliance -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events"
        xmlns:v="http://schemas.microsoft.com/visio/2003/SVGExtensions/" width="11.6872in" height="8.79076in"
        viewBox="0 0 841.476 632.935" xml:space="preserve" color-interpolation-filters="sRGB" class="st36">

Answer 1

不确定是否要使用自己的自定义实现解决此问题，但datatables插件具有固定的标头响应功能，可能值得一试。

http://datatables.net/

具有响应表宽度的HTML表固定标头

1 个答案: