Таблица с фиксированным первым столбцом

0 Пользователей и 1 Гость просматривают эту тему.
  • 1 Ответов
  • 150 Просмотров
*

mrwad

  • Новичок
  • *
  • 2
  • 0
Всем привет!

Не могу доработать таблицу, чтобы при просмотре на телефоне фиксировалась первый столбец. Сейчас таблица работает правильно и ее можно перелистывать на телефоне (в мобильной версии сайта), но хотелосьбы довести до совершенства и зафиксировать первый столбец. Уже и так и сяк пробовал, но никак толком не работает. Понимаю, что лыжи едут, дело скорее всего в другом :), но раз тему начал, надо продолжать, пока не заработает. Специально перенес все с локалхоста, чтобы долго не объяснять. Таблица меня полностью устраивает, даже тексты первой колонки корректно в мобильной версии строчки меняют. Единственное, что мне нужно, чтобы все оставалось в первозданном виде и блокировался на месте первый столбец (только в мобильной версии сайта!).

Код
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th> </th>
<th> </th>
<th><center>Range Rover</center></th>
<th><center>Mercedes</center></th>
<th><center>Toyota</center></th>
<th><center>Airbus A320</center></th>
</tr>
</thead>
<tbody>
<tr>
<td>Effective power management</td>
<td><center>763</center></td>
<td><center>546</center></td>
<td><center>456</center></td>
                <td><center>69</center></td>
                <td><center>986</center></td>
</tr>
<tr>
<td>Effective torque</td>
<td><center>123</center></td>
<td><center>435</center></td>
<td><center>546</center></td>
                <td><center>46</center></td>
                <td><center>56</center></td>
</tr>
            <tr>
<td>Speed of machine</td>
<td><center>234</center></td>
<td><center>65</center></td>
<td><center>89</center></td>
                <td><center>657</center></td>
                <td><center>87</center></td>
</tr>
            <tr>
<td>Bumper number</td>
<td><center>23</center></td>
<td><center>324</center></td>
<td><center>54</center></td>
                <td><center>689</center></td>
                <td><center>657</center></td>
</tr>
            <tr>
<td>Length</td>
<td><center>57</center></td>
<td><center>98</center></td>
<td><center>09</center></td>
                <td><center>97</center></td>
                <td><center>90</center></td>
</tr>
                        <tr>
<td>Width</td>
<td><center>87</center></td>
<td><center>98</center></td>
<td><center>56</center></td>
                <td><center>54</center></td>
                <td><center>67</center></td>
</tr>
                        <tr>
<td>Height</td>
<td><center>87</center></td>
<td><center>456</center></td>
<td><center>456</center></td>
                <td><center>65</center></td>
                <td><center>76</center></td>
</tr>
                        <tr>
<td>Weight</td>
<td><center>87</center></td>
<td><center>98</center></td>
<td><center>44</center></td>
                <td><center>675</center></td>
                <td><center>54</center></td>
</tr>
                        <tr>
<td>Power</td>
<td><center>87</center></td>
<td><center>56</center></td>
<td><center>675</center></td>
                <td><center>8678</center></td>
                <td><center>986</center></td>
</tr>
</tbody>
</table>
</div>

Ссылка на сайт с таблицей: http://provadt9.beget.tech/
    

« Последнее редактирование: 19.01.2017, 00:50:33 от mrwad »

*

pavelrer

  • Завсегдатай
  • *****
  • 412
  • 8
Таблицы плохо! если в дивы сможете и имеет место быть, то погуглите перевод таблиц в дивы.