Fügen Sie Horizontale Scroll Jquery Mobile Tisch?

Habe ich das folgende markup,

<table class="ui-responsive table-stroke ui-table ui-table-columntoggle"
    data-mode="columntoggle" data-role="table" style=
    "overflow-x: scroll !important;">
        <thead>
            <tr>
                <th class="ui-table-priority-6" data-colstart="1"
                data-priority="6" style="font-weight: bold;">SL</th>

                <th class="ui-table-priority-6" data-colstart="2"
                data-priority="6" style="font-weight: bold;">Cat</th>

                <th class="ui-table-priority-6" data-colstart="3"
                data-priority="6" style="font-weight: bold;">Brand</th>

                <th class="ui-table-priority-6" data-colstart="4"
                data-priority="6" style="font-weight: bold;">Product</th>

                <th class="ui-table-priority-persist" data-colstart="5"
                data-priority="persist" style="font-weight: bold;">Item
                Code</th>

                <th class="ui-table-priority-persist" data-colstart="6"
                data-priority="persist" style="font-weight: bold;">Model
                Number</th>

                <th class="ui-table-priority-6" data-colstart="7"
                data-priority="6" style="font-weight: bold;">Bundle Value</th>

                <th class="ui-table-priority-persist" data-colstart="8"
                data-priority="persist" style="font-weight: bold;">Old RSP</th>

                <th class="ui-table-priority-persist" data-colstart="9"
                data-priority="persist" style="font-weight: bold;">Promo
                RSP</th>

                <th class="ui-table-priority-6" data-colstart="10"
                data-priority="6" style="font-weight: bold;">Reduced %age</th>

                <th class="ui-table-priority-6" data-colstart="11"
                data-priority="6" style="font-weight: bold;">Start Date</th>

                <th class="ui-table-priority-6" data-colstart="12"
                data-priority="6" style="font-weight: bold;">Vendor End
                Date</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td class="ui-table-priority-6">
                    <p>A115</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>SDA</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Panasonic</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Blender</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>11651099</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>MXAC400</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>GV 50</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 399</strong></p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>
                    <strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;399</strong></p>
                </td>

                <td class="ui-table-priority-6">
                    <p>0%</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Feb 26th</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Mar 8th</p>
                </td>
            </tr>

            <tr>
                <td class="ui-table-priority-6">
                    <p>C073</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>SDA</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Tefal</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Fryer</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>11480473</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p>FZ700072</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>PB</p>
                </td>

                <td class="ui-table-priority-persist">
                    <p><strong>999</strong></p>
                </td>

                <td class="ui-table-priority-persist">
                    <p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 749</strong></p>
                </td>

                <td class="ui-table-priority-6">
                    <p>25%</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Mar 1st</p>
                </td>

                <td class="ui-table-priority-6">
                    <p>Will Revert</p>
                </td>
            </tr>
        </tbody>
    </table>

Kann ich hinzufügen, eine horizontale markup? Damit kann der Benutzer leicht navigieren Sie nach rechts und Links

InformationsquelleAutor user960567 | 2014-03-03
  1. 3

    Können Sie wickeln Sie Ihre Tabelle mit div wie:

    <div style="width: 100%; height: 400px; overflow: auto">
  <table>
    <!-- table content -->
  </table>
</div>
    InformationsquelleAutor Hardy
  2. 3

    Wenn die Tabellen - > Fenster Breite scrollen sichtbar sein wird dy Standard.

    Überprüfen, CSS-styles und js (jQuery Mobile kann fest der Tabelle Fensterbreite)

    Du kannst auch div-container, zum Beispiel:

    <div style="width:300px;overflow:auto">
  <table>...</table>
</div>
    InformationsquelleAutor user3279626
  3. 0

    Den Antworten für mich gearbeitet, aber ich wollte nicht angeben, explizite Breite oder Höhe haben, so dass im folgenden das problem, noch besser:

    <div style="overflow-x: auto;">
  <table [...] </table>
</div>
    InformationsquelleAutor Kevin
Schreibe einen Kommentar