Bin ziemlich am Anfang mit meinen Jquery Mobile/Html5/JS-Kenntnissen, und habe folgendes Problem:
Ich möchte eine Tabelle mit ca 25 Spalten darstellen. Das passt natürlich nicht aufs Handy-Display.
Nun sollen Header und Footer in den Vieport passen, aber die Tabelle soll darüber hinaus gehen, und mit Fingerstreich verschoben werden können.
Ich krieg den Fingerstreich nur hin, wenn ich einen "großen" Viewport setze. Dann ist aber auch die Header-/ Footer-Zeile zu breit/verschiebbar. Wie kann man das lösen?
Außerdem ist die Tabelle mit strokes/strikes horizontal farblich abgesetzt. Sinnvoller wäre es aber die Spalten farblich abzusetzen, nicht die Reihen!?
Kann mir einer einen tip geben?
Gruß Bernd
Ich möchte eine Tabelle mit ca 25 Spalten darstellen. Das passt natürlich nicht aufs Handy-Display.
Nun sollen Header und Footer in den Vieport passen, aber die Tabelle soll darüber hinaus gehen, und mit Fingerstreich verschoben werden können.
Ich krieg den Fingerstreich nur hin, wenn ich einen "großen" Viewport setze. Dann ist aber auch die Header-/ Footer-Zeile zu breit/verschiebbar. Wie kann man das lösen?
Außerdem ist die Tabelle mit strokes/strikes horizontal farblich abgesetzt. Sinnvoller wäre es aber die Spalten farblich abzusetzen, nicht die Reihen!?
Kann mir einer einen tip geben?
Gruß Bernd
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="d" id="home">
<div data-role="header" >
<h1>Header</h1>
</div>
<div data-role="content">
<table data-role="table" id="my-table" data-mode="columntoggle" class="ui-responsive table-stripe table-stroke ui-shadow" data-column-btn-text="Spalten">
<thead>
<tr>
<th data-priority="1">A</th>
<th data-priority="1">B</th>
<th data-priority="1">C</th>
<th data-priority="1">D</th>
<th data-priority="1">E</th>
<th data-priority="1">F</th>
<th data-priority="1">G</th>
<th data-priority="1">H</th>
<th data-priority="1">I</th>
<th data-priority="1">J</th>
<th data-priority="1">K</th>
<th data-priority="1">L</th>
<th data-priority="1">M</th>
<th data-priority="1">N</th>
<th data-priority="1">O</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
<td>07</td>
<td>08</td>
<td>09</td>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
<td>05</td>
<td>06</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
</tr>
</tbody>
</table>
</div>
<div data-role="footer">
<h1>Footer</h1>
</div>
</div>
</body>
</html>
