Как использовать FixedHeaderTable - нужны базовые рекомендации

Question

Как использовать FixedHeaderTable - нужны базовые рекомендации

После долгих поисков я наткнулся на этот плагин: Fixed Header Tables. Полагаю, я следовал инструкциям, приведенным на главном веб-сайте, но не смог заставить его работать.

Ну, я хотел сделать обычную табличную функцию, такую как фиксированная верхняя строка и левый столбец. Поэтому я подумал об использовании этого плагина. Но, в конечном счете, он создает теневой div, но, кажется, не прокручивается и не фиксируется до определенного размера.

Я также не знаю, куда отправить размеры. Вот что я имею до сих пор:

$(document).ready(function () {
  $("table").fixedHeaderTable({ footer: true, cloneHeadToFoot: true, fixedColumn: true });
});

* {font-family: Segoe UI;}
body {font-size: 80%;}
table {width: 150px; height: 235px;}
th {text-align: left;}
.fht-table-wrapper {height: 35px;}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fixed-header-table/1.3.0/jquery.fixedheadertable.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Sl No</th>
      <th>Name</th>
      <th>Subject</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Praveen</td>
      <td>Communication Disorders</td>
      <td>23</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Bhalmung</td>
      <td>Language Learning</td>
      <td>21</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Vicky</td>
      <td>Computer Engineering</td>
      <td>21</td>
    </tr>
    <tr>
      <th>4</th>
      <td>Alice</td>
      <td>Computer Science</td>
      <td>41</td>
    </tr>
    <tr>
      <th>5</th>
      <td>Carol</td>
      <td>Counselling</td>
      <td>83</td>
    </tr>
    <tr>
      <th>6</th>
      <td>Chuck</td>
      <td>Criminal Justice</td>
      <td>82</td>
    </tr>
    <tr>
      <th>7</th>
      <td>Craig</td>
      <td>Cultural Studies</td>
      <td>93</td>
    </tr>
    <tr>
      <th>8</th>
      <td>Dan</td>
      <td>Ecology</td>
      <td>63</td>
    </tr>
    <tr>
      <th>9</th>
      <td>Erin</td>
      <td>Economics</td>
      <td>26</td>
    </tr>
    <tr>
      <th>10</th>
      <td>Eve</td>
      <td>Education</td>
      <td>22</td>
    </tr>
    <tr>
      <th>11</th>
      <td>Faythe</td>
      <td>Engineering</td>
      <td>52</td>
    </tr>
    <tr>
      <th>12</th>
      <td>Frank</td>
      <td>Engineering Geology</td>
      <td>93</td>
    </tr>
    <tr>
      <th>13</th>
      <td>Mallet</td>
      <td>Engineering Management</td>
      <td>16</td>
    </tr>
    <tr>
      <th>14</th>
      <td>Oscar</td>
      <td>Engineering Mathematics</td>
      <td>57</td>
    </tr>
    <tr>
      <th>15</th>
      <td>Peggy</td>
      <td>English</td>
      <td>5</td>
    </tr>
    <tr>
      <th>16</th>
      <td>Sam</td>
      <td>English Language</td>
      <td>27</td>
    </tr>
    <tr>
      <th>17</th>
      <td>Sybil</td>
      <td>Environmental Science</td>
      <td>61</td>
    </tr>
    <tr>
      <th>18</th>
      <td>Trent</td>
      <td>Ethics</td>
      <td>66</td>
    </tr>
    <tr>
      <th>19</th>
      <td>Walter</td>
      <td>European and European Union Studies</td>
      <td>82</td>
    </tr>
    <tr>
      <th>20</th>
      <td>Wendy</td>
      <td>European Union Studies</td>
      <td>79</td>
    </tr>
  </tbody>
</table>

Если вы видите фрагмент, он не входит в 150 px x 235 px размеры. Куда я иду не так.

3

html jquery css html-table fixed-header-tables

Источник

user462627 23 янв '15 в 16:51

2 ответа

Решение

Для тех, кто все еще борется с этой проблемой, попробуйте добавить опцию высоты

$('#myTable').fixedHeaderTable({ height: 500 });

1

Источник

user4776962 04 май '17 в 10:56

Другие вопросы по тегам html jquery css html-table fixed-header-tables

user2385 23 янв '15 в 20:07 2015-01-23 20:07 · Accepted Answer · 2015-01-23 20:07

Вы скучаете по defaultTheme.css файл (или любой файл темы)

$(document).ready(function () {
  $("table").fixedHeaderTable({ footer: true, cloneHeadToFoot: true, fixedColumn: true, height: 300  });
});

* {font-family: Segoe UI;}
body {font-size: 80%;}
table {}
th {text-align: left;}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fixed-header-table/1.3.0/jquery.fixedheadertable.min.js"></script>
<link rel="stylesheet" href="http://www.fixedheadertable.com/css/defaultTheme.css" media="screen" />
<table>
  <thead>
    <tr>
      <th>Sl No</th>
      <th>Name</th>
      <th>Subject</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>Praveen</td>
      <td>Communication Disorders</td>
      <td>23</td>
    </tr>
    <tr>
      <th>2</th>
      <td>Bhalmung</td>
      <td>Language Learning</td>
      <td>21</td>
    </tr>
    <tr>
      <th>3</th>
      <td>Vicky</td>
      <td>Computer Engineering</td>
      <td>21</td>
    </tr>
    <tr>
      <th>4</th>
      <td>Alice</td>
      <td>Computer Science</td>
      <td>41</td>
    </tr>
    <tr>
      <th>5</th>
      <td>Carol</td>
      <td>Counselling</td>
      <td>83</td>
    </tr>
    <tr>
      <th>6</th>
      <td>Chuck</td>
      <td>Criminal Justice</td>
      <td>82</td>
    </tr>
    <tr>
      <th>7</th>
      <td>Craig</td>
      <td>Cultural Studies</td>
      <td>93</td>
    </tr>
    <tr>
      <th>8</th>
      <td>Dan</td>
      <td>Ecology</td>
      <td>63</td>
    </tr>
    <tr>
      <th>9</th>
      <td>Erin</td>
      <td>Economics</td>
      <td>26</td>
    </tr>
    <tr>
      <th>10</th>
      <td>Eve</td>
      <td>Education</td>
      <td>22</td>
    </tr>
    <tr>
      <th>11</th>
      <td>Faythe</td>
      <td>Engineering</td>
      <td>52</td>
    </tr>
    <tr>
      <th>12</th>
      <td>Frank</td>
      <td>Engineering Geology</td>
      <td>93</td>
    </tr>
    <tr>
      <th>13</th>
      <td>Mallet</td>
      <td>Engineering Management</td>
      <td>16</td>
    </tr>
    <tr>
      <th>14</th>
      <td>Oscar</td>
      <td>Engineering Mathematics</td>
      <td>57</td>
    </tr>
    <tr>
      <th>15</th>
      <td>Peggy</td>
      <td>English</td>
      <td>5</td>
    </tr>
    <tr>
      <th>16</th>
      <td>Sam</td>
      <td>English Language</td>
      <td>27</td>
    </tr>
    <tr>
      <th>17</th>
      <td>Sybil</td>
      <td>Environmental Science</td>
      <td>61</td>
    </tr>
    <tr>
      <th>18</th>
      <td>Trent</td>
      <td>Ethics</td>
      <td>66</td>
    </tr>
    <tr>
      <th>19</th>
      <td>Walter</td>
      <td>European and European Union Studies</td>
      <td>82</td>
    </tr>
    <tr>
      <th>20</th>
      <td>Wendy</td>
      <td>European Union Studies</td>
      <td>79</td>
    </tr>
  </tbody>
</table>