Question

我有以下问题：我在顶部使用带有多列过滤的数据表。如果您通过此链接观看视频，则可以了解问题：

https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0

当我调整浏览器窗口的大小时，输入搜索字段仍然可见，导致表格溢出。显然，数据表已通过javascript和响应选项初始化。这是HTML：

<section class="content">
<div class="container-fluid">
    <div class="block-header">
        <h2>
            VISUALIZZAZIONE OFFERTE ABITATIVE
            <small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
        </h2>
    </div>
    <div class="row clearfix">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="card">
                <div class="body">
                    {$sizeOffers = count($offers)}
                    {if $sizeOffers gt 0}
                        {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
                    {else}
                        <div class="alert alert-warning">
                            Non c'&egrave; nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
                        </div>
                    {/if}
                    <hr>
                    <div class="text-center">
                        <a href="/residentialoffer/add" class="btn btn-primary waves-effect">Aggiugi un'offerta</a>
                        {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
</div>

如您所见，offers.tpl是一个包含的文件，包含：

<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
<thead>
<tr>
    <th>Azioni</th>
    <th>Identificativo</th>
    {if !isset($from_contact)}
        <th>Offerente</th>
    {/if}
    <th>Affitto/Vendita</th>
    <th>Comune</th>
    <th>Telefono</th>
    <th>Provenienza</th>
    <th>Tipologia</th>
    <th>Prezzo</th>
</tr>
<tr>
    <th>Azioni</th>
    <th>Identificativo</th>
    {if !isset($from_contact)}
        <th>Offerente</th>
    {/if}
    <th>Affitto/Vendita</th>
    <th>Comune</th>
    <th>Telefono</th>
    <th>Provenienza</th>
    <th>Tipologia</th>
    <th>Prezzo</th>
</tr>
</thead>
<tbody>
......
</tbody>

你能帮助我吗？

Answer 1

通过在.table-responsive中包装任何.table来创建响应式表：

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

响应式调整大小，顶部带有输入搜索框

1 个答案: