gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 00:44:34 24 4
gpt4 key购买 nike

对于一个 Angular 元素,我需要制作一个包含很多列的表格。我希望我的标题行始终可见。表格的主体必须可以在 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>

最佳答案

这可能就是您要查找的内容:http://ui-grid.info/

在尝试制作我自己的带有固定标题/列的可滚动表格后,我决定使用这个表格。

enter image description here

关于html - 具有固定标题和可滚动 x-y 正文的 Css 表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53614721/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com