Question

对于有角度的项目，我需要制作一个包含很多列的表格。我希望标题行始终可见。表格的主体必须在x和y方向上可滚动。但是，如果我在X位置滚动，则标题的滚动必须与行一起进行。

这是我到目前为止所获得的。 y方向上的滚动条在表格的末尾，并不总是可见的。我希望Y滚动条始终可见。有关如何执行此操作的任何想法？

我想通过组件seen here实现类似此数据表的功能。

p {
  font-family: Lato;
}

table ,tr td{
    border:1px solid gray;
}
tbody {
    display:block;
    height:100px;
    overflow:auto;
}
thead, tbody tr {
    display:table;
    width:100%;
}
thead {
    width: calc( 100% - 1em )/* scrollbar is average 1em/16px width, remove it from thead width */
}

<div #panel style="height: 150px; overflow-x: scroll; overflow-y: hidden">
  <table>
    <thead>
      <tr>
          <th style="min-width: 550px;">Column1</th>
          <th style="min-width: 160px;">Column2</th>
          <th style="min-width: 80px;">Column3</th>
          <th style="min-width: 145px;">Column4</th>
          <th style="min-width: 90px;">Column5</th>
          <th style="min-width: 65px;">Column6</th>
          <th style="min-width: 65px;">Column7</th>
          <th style="min-width: 65px;">Column8</th>
          <th style="min-width: 100px;">Column9</th>
          <th style="min-width: 350px;">Column10</th>
          <th style="min-width: 360px;">Column11</th>
          <th style="min-width: 145px;">Column12</th>
          <th style="min-width: 145px;">Column13</th>
          <th style="min-width: 200px;">Column14</th>
          <th style="min-width: 200px;">Column15</th>
          <th style="min-width: 200px;">Column16</th>
          <th style="min-width: 145px;">Column17</th>
          <th style="min-width: 200px;">Column18</th>
          <th style="min-width: 200px;">Column19</th>
          <th style="min-width: 200px;">Column20</th>
          <th style="min-width: 100px;">Column21</th>
          <th style="min-width: 150px;">Column22</th>
          <th style="min-width: 150px;">Column23</th>
          <th style="min-width: 100px;">Column24</th>
      </tr>
      
    </thead>
    <tbody>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
        <tr>
          <td style="min-width: 550px;">1</td>
          <td style="min-width: 160px;">2</td>
          <td style="min-width: 80px;">3</td>
          <td style="min-width: 145px;">4</td>
          <td style="min-width: 90px;">5</td>
          <td style="min-width: 65px;">6</td>
          <td style="min-width: 65px;">7</td>
          <td style="min-width: 65px;">8</td>
          <td style="min-width: 100px;">9</td>
          <td style="min-width: 350px;">10</td>
          <td style="min-width: 360px;">11</td>
          <td style="min-width: 145px;">12</td>
          <td style="min-width: 145px;">13</td>
          <td style="min-width: 200px;">14</td>
          <td style="min-width: 200px;">15</td>
          <td style="min-width: 200px;">16</td>
          <td style="min-width: 145px;">17</td>
          <td style="min-width: 200px;">18</td>
          <td style="min-width: 200px;">19</td>
          <td style="min-width: 200px;">20</td>
          <td style="min-width: 100px;">21</td>
          <td style="min-width: 150px;">22</td>
          <td style="min-width: 150px;">23</td>
          <td style="min-width: 100px;">24</td>
        </tr>
      </tbody>
  </table>

</div>

Answer 1

这可能是您要寻找的：http://ui-grid.info/

经过几次尝试使用粘滞的标题/列制作自己的可滚动表后，我决定使用此表。

具有固定标题和可滚动x-y正文的CSS表

1 个答案: