设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › table 加个横向的 滚动条，这个要怎么加
返回列表 发新帖
查看: 755|回复: 1

[已解决]table 加个横向的 滚动条，这个要怎么加

[复制链接]
makliu
发表于 2022-12-9 15:20:41 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
千辛万苦在网上找了一段代码， table 固定行列的 。
发现它没有横向滚动条。。。。

万能鱼友们， 求给这段代码 在table上 加个横向的滚动条。。。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title></title>
  6.     <style>
  7.         table {
  8.             border-collapse: collapse;
  9.         }

  11.         .sticky-table {
  12.             overflow: auto;
  13.             height: 100%; /* 设置固定高度 */
  14.             width: 100%;
  15.             position: absolute
  16.         }

  18.         .sticky-table td, .sticky-table th {
  19.             /* 设置td,th宽度高度 */
  20.             border: 1px solid #c7d8ee;
  21.             width: 150px;
  22.             min-width: 150px;
  23.             height: 30px;
  24.             padding: 5px;
  25.         }

  27.         .sticky-table th {
  28.             position: sticky;
  29.             top: 0; /* 首行永远固定在头部  */
  30.             background-color: #eaf4ff; /*设置表头背景色*/
  31.         }

  33.         .sticky-table td:first-child, .sticky-table th:first-child {
  34.             position: sticky;
  35.             left: 0; /* 首列永远固定在左侧 */
  36.             z-index: 1;
  37.             background-color: #eaf4ff;
  38.         }

  40.         .sticky-table th:first-child {
  41.             z-index: 2; /*表头的首列要在上面*/
  42.         }

  44.         .sticky-table th > div {
  45.             width: 100%;
  46.             white-space: normal;
  47.             word-wrap: break-word;
  48.             word-break: break-all;
  49.         }

  51.         /*.sticky-table table {
  52.             table-layout: fixed;
  53.         }*/

  55.     </style>
  56. </head>
  57. <body style="padding: 0px;margin: 0px;">
  58. <div class="sticky-table">
  59.     <table>
  60.         <thead>
  61.         <tr>
  62.             <th></th>
  63.             <th colspan="8">个人素养</th>
  64.             <th colspan="4">社群素养</th>
  65.             <th colspan="8">职业素养</th>
  66.         </tr>
  67.         <tr>
  68.             <th></th>
  69.             <th colspan="2">身体素质</th>
  70.             <th colspan="2">艺术修养</th>
  71.             <th colspan="2">心理素质</th>
  72.             <th colspan="2">道德修为</th>
  73.             <th colspan="2">爱国与责任意识</th>
  74.             <th colspan="2">法律与环保意识</th>
  75.             <th colspan="6">基本职业素质</th>
  76.             <th colspan="2">企业文化与创新精神</th>
  77.         </tr>
  78.         <tr>
  79.             <th>姓名</th>
  80.             <th>
  81.                 <div>基本身体情况</div>
  82.             </th>
  83.             <th>
  84.                 <div>体育特长能力</div>
  85.             </th>
  86.             <th>
  87.                 <div>艺术审美</div>
  88.             </th>
  89.             <th>
  90.                 <div>爱好特长</div>
  91.             </th>
  92.             <th>
  93.                 <div>心理健康</div>
  94.             </th>
  95.             <th>
  96.                 <div>自我调节</div>
  97.             </th>
  98.             <th>
  99.                 <div>自信自强、诚实守信</div>
  100.             </th>
  101.             <th>
  102.                 <div>文明素养、个人行为规范</div>
  103.             </th>
  104.             <th>
  105.                 <div>爱国意识</div>
  106.             </th>
  107.             <th>
  108.                 <div>责任心及服务意识</div>
  109.             </th>
  110.             <th>
  111.                 <div>法律意识</div>
  112.             </th>
  113.             <th>
  114.                 <div>环保意识</div>
  115.             </th>
  116.             <th>
  117.                 <div>语言表达能力及口语特长</div>
  118.             </th>
  119.             <th>
  120.                 <div>自我管理，自我激励</div>
  121.             </th>
  122.             <th>
  123.                 <div>发展规划能力</div>
  124.             </th>
  125.             <th>
  126.                 <div>信息技术能力</div>
  127.             </th>
  128.             <th>
  129.                 <div>沟通能力</div>
  130.             </th>
  131.             <th>
  132.                 <div>团队合作能力</div>
  133.             </th>
  134.             <th>
  135.                 <div>企业文化学习</div>
  136.             </th>
  137.             <th>
  138.                 <div>创新能力、解决问题能力</div>
  139.             </th>
  140.         </tr>
  141.         </thead>
  142.         <tbody>
  143.         <tr>
  144.             <td>优秀</td>
  145.             <td>优秀</td>
  146.             <td>优秀</td>
  147.             <td>优秀</td>
  148.             <td>优秀</td>
  149.             <td>优秀</td>
  150.             <td>优秀</td>
  151.             <td>优秀</td>
  152.             <td>优秀</td>
  153.             <td>优秀</td>
  154.             <td>优秀</td>
  155.             <td>优秀</td>
  156.             <td>优秀</td>
  157.             <td>优秀</td>
  158.             <td>优秀</td>
  159.             <td>优秀</td>
  160.             <td>优秀</td>
  161.             <td>优秀</td>
  162.             <td>优秀</td>
  163.             <td>优秀</td>
  164.             <td>优秀</td>
  165.         </tr>
  166.         <tr>
  167.             <td>优秀</td>
  168.             <td>优秀</td>
  169.             <td>优秀</td>
  170.             <td>优秀</td>
  171.             <td>优秀</td>
  172.             <td>优秀</td>
  173.             <td>优秀</td>
  174.             <td>优秀</td>
  175.             <td>优秀</td>
  176.             <td>优秀</td>
  177.             <td>优秀</td>
  178.             <td>优秀</td>
  179.             <td>优秀</td>
  180.             <td>优秀</td>
  181.             <td>优秀</td>
  182.             <td>优秀</td>
  183.             <td>优秀</td>
  184.             <td>优秀</td>
  185.             <td>优秀</td>
  186.             <td>优秀</td>
  187.             <td>优秀</td>
  188.         </tr>
  189.         <tr>
  190.             <td>优秀</td>
  191.             <td>优秀</td>
  192.             <td>优秀</td>
  193.             <td>优秀</td>
  194.             <td>优秀</td>
  195.             <td>优秀</td>
  196.             <td>优秀</td>
  197.             <td>优秀</td>
  198.             <td>优秀</td>
  199.             <td>优秀</td>
  200.             <td>优秀</td>
  201.             <td>优秀</td>
  202.             <td>优秀</td>
  203.             <td>优秀</td>
  204.             <td>优秀</td>
  205.             <td>优秀</td>
  206.             <td>优秀</td>
  207.             <td>优秀</td>
  208.             <td>优秀</td>
  209.             <td>优秀</td>
  210.             <td>优秀</td>
  211.         </tr>
  212.         <tr>
  213.             <td>优秀</td>
  214.             <td>优秀</td>
  215.             <td>优秀</td>
  216.             <td>优秀</td>
  217.             <td>优秀</td>
  218.             <td>优秀</td>
  219.             <td>优秀</td>
  220.             <td>优秀</td>
  221.             <td>优秀</td>
  222.             <td>优秀</td>
  223.             <td>优秀</td>
  224.             <td>优秀</td>
  225.             <td>优秀</td>
  226.             <td>优秀</td>
  227.             <td>优秀</td>
  228.             <td>优秀</td>
  229.             <td>优秀</td>
  230.             <td>优秀</td>
  231.             <td>优秀</td>
  232.             <td>优秀</td>
  233.             <td>优秀</td>
  234.         </tr>
  235.         <tr>
  236.             <td>优秀</td>
  237.             <td>优秀</td>
  238.             <td>优秀</td>
  239.             <td>优秀</td>
  240.             <td>优秀</td>
  241.             <td>优秀</td>
  242.             <td>优秀</td>
  243.             <td>优秀</td>
  244.             <td>优秀</td>
  245.             <td>优秀</td>
  246.             <td>优秀</td>
  247.             <td>优秀</td>
  248.             <td>优秀</td>
  249.             <td>优秀</td>
  250.             <td>优秀</td>
  251.             <td>优秀</td>
  252.             <td>优秀</td>
  253.             <td>优秀</td>
  254.             <td>优秀</td>
  255.             <td>优秀</td>
  256.             <td>优秀</td>
  257.         </tr>
  258.         <tr>
  259.             <td>优秀</td>
  260.             <td>优秀</td>
  261.             <td>优秀</td>
  262.             <td>优秀</td>
  263.             <td>优秀</td>
  264.             <td>优秀</td>
  265.             <td>优秀</td>
  266.             <td>优秀</td>
  267.             <td>优秀</td>
  268.             <td>优秀</td>
  269.             <td>优秀</td>
  270.             <td>优秀</td>
  271.             <td>优秀</td>
  272.             <td>优秀</td>
  273.             <td>优秀</td>
  274.             <td>优秀</td>
  275.             <td>优秀</td>
  276.             <td>优秀</td>
  277.             <td>优秀</td>
  278.             <td>优秀</td>
  279.             <td>优秀</td>
  280.         </tr>
  281.         <tr>
  282.             <td>优秀</td>
  283.             <td>优秀</td>
  284.             <td>优秀</td>
  285.             <td>优秀</td>
  286.             <td>优秀</td>
  287.             <td>优秀</td>
  288.             <td>优秀</td>
  289.             <td>优秀</td>
  290.             <td>优秀</td>
  291.             <td>优秀</td>
  292.             <td>优秀</td>
  293.             <td>优秀</td>
  294.             <td>优秀</td>
  295.             <td>优秀</td>
  296.             <td>优秀</td>
  297.             <td>优秀</td>
  298.             <td>优秀</td>
  299.             <td>优秀</td>
  300.             <td>优秀</td>
  301.             <td>优秀</td>
  302.             <td>优秀</td>
  303.         </tr>
  304.         <tr>
  305.             <td>优秀</td>
  306.             <td>优秀</td>
  307.             <td>优秀</td>
  308.             <td>优秀</td>
  309.             <td>优秀</td>
  310.             <td>优秀</td>
  311.             <td>优秀</td>
  312.             <td>优秀</td>
  313.             <td>优秀</td>
  314.             <td>优秀</td>
  315.             <td>优秀</td>
  316.             <td>优秀</td>
  317.             <td>优秀</td>
  318.             <td>优秀</td>
  319.             <td>优秀</td>
  320.             <td>优秀</td>
  321.             <td>优秀</td>
  322.             <td>优秀</td>
  323.             <td>优秀</td>
  324.             <td>优秀</td>
  325.             <td>优秀</td>
  326.         </tr>
  327.         <tr>
  328.             <td>优秀</td>
  329.             <td>优秀</td>
  330.             <td>优秀</td>
  331.             <td>优秀</td>
  332.             <td>优秀</td>
  333.             <td>优秀</td>
  334.             <td>优秀</td>
  335.             <td>优秀</td>
  336.             <td>优秀</td>
  337.             <td>优秀</td>
  338.             <td>优秀</td>
  339.             <td>优秀</td>
  340.             <td>优秀</td>
  341.             <td>优秀</td>
  342.             <td>优秀</td>
  343.             <td>优秀</td>
  344.             <td>优秀</td>
  345.             <td>优秀</td>
  346.             <td>优秀</td>
  347.             <td>优秀</td>
  348.             <td>优秀</td>
  349.         </tr>
  350.         <tr>
  351.             <td>优秀</td>
  352.             <td>优秀</td>
  353.             <td>优秀</td>
  354.             <td>优秀</td>
  355.             <td>优秀</td>
  356.             <td>优秀</td>
  357.             <td>优秀</td>
  358.             <td>优秀</td>
  359.             <td>优秀</td>
  360.             <td>优秀</td>
  361.             <td>优秀</td>
  362.             <td>优秀</td>
  363.             <td>优秀</td>
  364.             <td>优秀</td>
  365.             <td>优秀</td>
  366.             <td>优秀</td>
  367.             <td>优秀</td>
  368.             <td>优秀</td>
  369.             <td>优秀</td>
  370.             <td>优秀</td>
  371.             <td>优秀</td>
  372.         </tr>
  373.         <tr>
  374.             <td>优秀</td>
  375.             <td>优秀</td>
  376.             <td>优秀</td>
  377.             <td>优秀</td>
  378.             <td>优秀</td>
  379.             <td>优秀</td>
  380.             <td>优秀</td>
  381.             <td>优秀</td>
  382.             <td>优秀</td>
  383.             <td>优秀</td>
  384.             <td>优秀</td>
  385.             <td>优秀</td>
  386.             <td>优秀</td>
  387.             <td>优秀</td>
  388.             <td>优秀</td>
  389.             <td>优秀</td>
  390.             <td>优秀</td>
  391.             <td>优秀</td>
  392.             <td>优秀</td>
  393.             <td>优秀</td>
  394.             <td>优秀</td>
  395.         </tr>
  396.         <tr>
  397.             <td>优秀</td>
  398.             <td>优秀</td>
  399.             <td>优秀</td>
  400.             <td>优秀</td>
  401.             <td>优秀</td>
  402.             <td>优秀</td>
  403.             <td>优秀</td>
  404.             <td>优秀</td>
  405.             <td>优秀</td>
  406.             <td>优秀</td>
  407.             <td>优秀</td>
  408.             <td>优秀</td>
  409.             <td>优秀</td>
  410.             <td>优秀</td>
  411.             <td>优秀</td>
  412.             <td>优秀</td>
  413.             <td>优秀</td>
  414.             <td>优秀</td>
  415.             <td>优秀</td>
  416.             <td>优秀</td>
  417.             <td>优秀</td>
  418.         </tr>
  419.         <tr>
  420.             <td>优秀</td>
  421.             <td>优秀</td>
  422.             <td>优秀</td>
  423.             <td>优秀</td>
  424.             <td>优秀</td>
  425.             <td>优秀</td>
  426.             <td>优秀</td>
  427.             <td>优秀</td>
  428.             <td>优秀</td>
  429.             <td>优秀</td>
  430.             <td>优秀</td>
  431.             <td>优秀</td>
  432.             <td>优秀</td>
  433.             <td>优秀</td>
  434.             <td>优秀</td>
  435.             <td>优秀</td>
  436.             <td>优秀</td>
  437.             <td>优秀</td>
  438.             <td>优秀</td>
  439.             <td>优秀</td>
  440.             <td>优秀</td>
  441.         </tr>
  442.         <tr>
  443.             <td>优秀</td>
  444.             <td>优秀</td>
  445.             <td>优秀</td>
  446.             <td>优秀</td>
  447.             <td>优秀</td>
  448.             <td>优秀</td>
  449.             <td>优秀</td>
  450.             <td>优秀</td>
  451.             <td>优秀</td>
  452.             <td>优秀</td>
  453.             <td>优秀</td>
  454.             <td>优秀</td>
  455.             <td>优秀</td>
  456.             <td>优秀</td>
  457.             <td>优秀</td>
  458.             <td>优秀</td>
  459.             <td>优秀</td>
  460.             <td>优秀</td>
  461.             <td>优秀</td>
  462.             <td>优秀</td>
  463.             <td>优秀</td>
  464.         </tr>
  465.         <tr>
  466.             <td>优秀</td>
  467.             <td>优秀</td>
  468.             <td>优秀</td>
  469.             <td>优秀</td>
  470.             <td>优秀</td>
  471.             <td>优秀</td>
  472.             <td>优秀</td>
  473.             <td>优秀</td>
  474.             <td>优秀</td>
  475.             <td>优秀</td>
  476.             <td>优秀</td>
  477.             <td>优秀</td>
  478.             <td>优秀</td>
  479.             <td>优秀</td>
  480.             <td>优秀</td>
  481.             <td>优秀</td>
  482.             <td>优秀</td>
  483.             <td>优秀</td>
  484.             <td>优秀</td>
  485.             <td>优秀</td>
  486.             <td>优秀</td>
  487.         </tr>
  488.         </tbody>
  489.     </table>
  490. </div>
  491. </body>
  492. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
洋洋痒
2022-12-10 18:49:42
你这个有横向滚动条的，只不过滚动条在 .sticky-table的最底下，你又设置的.sticky-table的height为100%，所以滚动条跑最下边了
，只需要改动一下就看到了
.sticky-table里的height改成85%
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

洋洋痒
发表于 2022-12-10 18:49:42 | 显示全部楼层    本楼为最佳答案   
你这个有横向滚动条的，只不过滚动条在 .sticky-table的最底下，你又设置的.sticky-table的height为100%，所以滚动条跑最下边了
，只需要改动一下就看到了
.sticky-table里的height改成85%
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-29 02:10

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表