使用網格系統在引導程序中制作可水平滾動的表

Question

我見過這樣的問題，但沒有一個對我有用。 所以這是我的代碼：

<div class="table-responsive">
<table class="table col-xs-12 col-md-12 col-lg-12 col-sm-12">
    <tr>
        {partners_info}
        <td>
            <a href="{link_partner}">
                <div style=" background-image: url('{img_partner}');" class="give_size">
                </div>
            </a>
        </td>
        {/partners_info}
    </tr>
</table>

<style>
    .give_size {
         background-repeat: no-repeat;
         background-size: 200px auto;
         background-position: center;
         height: 200px;
     }
</style>

基本上，我使用的是codeigniter和bootstrap，在我的網站上這是您可以清楚看到的問題，您可以向下滾動並查看它。 我想讓這張桌子水平滾動，但是圖片要按照代碼中的寬度正確顯示，希望能對您有所幫助並非常感謝。

Answer 1

檢查我的示例，使任何可滾動的東西我們都需要使其具有高度並使用overflow-x或overflow-y，並且在您的情況下，當我們發生溢出時，我們需要添加所需的內容，因此您希望使其能夠滾動看起來像overflow-y:scroll;

 tr { width: 100%; display: inline-table; } table{ height:300px; } tbody{ overflow-y: scroll; height: 200px; width: 100%; position: absolute; }

 <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <table class="table table-striped"> <thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th></tr></thead> <tbody> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> <tr><td>..</td><td>..</td><td>..</td></tr> </tbody> </table>

使用網格系統在引導程序中制作可水平滾動的表

問題描述

1 個解決方案

解決方案1
0 2015-05-03 12:15:07

使用網格系統在引導程序中制作可水平滾動的表

問題描述

1 個解決方案

解決方案1 0 2015-05-03 12:15:07

解決方案1
0 2015-05-03 12:15:07