Zrobiłem stół, który jest w modalnym za pomocą Twittera Bootstrap 3. Dziwna rzecz jest to, że działa dobrze na Firefoksie i Jsfiddle, ale nie w Google Chrome.

<button class="btn btn-xs btn-default" data-toggle="modal" data-target="#competitor_modal">
    Competitor
</button>

<div class="modal fade" id="competitor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Competitors</h4>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="table-responsive">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>Name</th>
                                            <th>URL</th>
                                            <th>Final Price</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>Comp Link</td>
                                            <td>http://www.complink.com.ph/product_info.php?cPath=49_9&amp;products_id=7371</td>
                                            <td>2790.00</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Gigahertz</td>
                                            <td>http://www.gigahertz.com.ph/products/accessories/headset/a4tech-hs-105</td>
                                            <td>8695.00</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>SM Cyber Zone</td>
                                            <td>http://www.smcyberzone.com/products/mobile-phones/acer/acer-liquid-s1</td>
                                            <td>9800.00</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Oto jsfiddle:
http://jsfiddle.net/dsf496JW/3/

Oto kilka zdjęć ekranowych.

Chrom: zrzut ekranu chrome

Firefox: Wpisz opis obrazu tutaj

9
Christian Burgos 18 sierpień 2014, 05:17

3 odpowiedzi

Wierzę, że Chrome nie jest fanem stołów przewijających, a Bootstrap lubi renderować tabelę, aby dopasować wszystkie dane niezależnie od. W Firefox to przewija, w chromie nie.

Jednym rozwiązaniem jest owinięcie tabeli w przewijalnym div. Może wyzwalaj na mniejszym ekranie mała zrzutów, aby naprawić odpowiedź Christinaina?

2
Theodore Enderby 18 sierpień 2014, 01:38

DEMO: http://jsfiddle.net/9349FE34/

enter image description here

Byłoby bardziej przyjazne dla użytkownika, imo, aby uzyskać szerokość Auto. Ładnie rozmiary, a responsywna tabela będzie kopać w punkcie przerwy 767px (domyślnie).

Dodaj klasę .table-modal do modalności

<div class="modal fade table-modal" id="competitor_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Dodaj CSS:

.table-modal .modal-dialog {width:auto;max-width:1000px;}
.table-modal {padding-left:5%;padding-right:5%;} /* put this in a 768px min-width */

I zdejmij .ROW i COL - * - 12 i płyn .Container-płyn wewnątrz materiału modalnego, nie jest to konieczne. Wyściółka na ciałem modal będzie działać świetnie.

2
Christina 18 sierpień 2014, 03:49

Myślałem, że doświadczam tego problemu z Bootstrapem 4 w Chrome (v. 79.0.3945.79 na Ubuntu 18.04).

Pasek slajdów nie pojawia się ani dokładnie - wystarczy pokazuje krótko, gdy zmieniam rozmiar, a następnie zniknie. Jednakże, pasek pozostaje widoczny / przeciągający na Firefoksie, jak się spodziewałem.

"Rozwiązanie" jest tylko tym, że chrom nie pokazuje paska przewijania, a Funkcjonalność paska przewijania jest renderowana jako sama tabela . Innymi słowy, używasz palca / myszy do przeciągnij samą tabelę w lewo / w prawo, tak jak przewijanie paska.

Mam 5 lat późno na tę imprezę, ale mam nadzieję, że ta wiadomość uratuje kogoś jakiś czas w 2020 r. I dalej.

0
C-Note187 2 styczeń 2020, 01:35