mypage の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• mypage へ行く。
  • 1 (2023-11-01 (水) 18:08:45)
  • 2 (2025-06-23 (月) 10:29:15)
  • 3 (2025-07-12 (土) 17:53:26)
  • 4 (2025-07-14 (月) 13:00:35)

FrontPage

!DOCTYPE html>

html lang="en">

head>

 <meta charset="UTF-8">
 <title>固定表格 + 可滚动表格</title>
 <style>
   body, html {
     margin: 0;
     padding: 0;
     height: 100%;
   }

   .container {
     display: flex;
     flex-direction: column;
     height: 100vh;
   }

   .fixed-table {
     background: #f5f5f5;
     border-bottom: 2px solid #ccc;
   }

   .scrollable-container {
     flex: 1;
     overflow-y: auto;
   }

   table {
     width: 100%;
     border-collapse: collapse;
   }

   table, th, td {
     border: 1px solid #999;
   }

   th, td {
     padding: 8px;
     text-align: center;
   }
 </style>

/head>

body>

div class="container">

 <!-- 固定表格 -->
 <div class="fixed-table">
   <table>
     <thead>
       <tr>
         <th>列1</th>
         <th>列2</th>
         <th>列3</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>A1</td>
         <td>A2</td>
         <td>A3</td>
       </tr>
     </tbody>
   </table>
 </div>

 <!-- 可滚动表格 -->
 <div class="scrollable-container">
   <table>
     <thead>
       <tr>
         <th>列1</th>
         <th>列2</th>
         <th>列3</th>
       </tr>
     </thead>
     <tbody>
       <!-- 用JS或手动添加多行数据 -->
       <script>
         for (let i = 1; i <= 10; i++) {
           document.write("<tr><td>行" + i + "-1</td><td>行" + i + "-2</td><td>行" + i + "-3</td></tr>");
         }
       </script>
     </tbody>
   </table>
 </div>

/div>

!-- jQuery 示例：设置动态高度（可选） -->

script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

script>

 $(function () {
   // 如果你需要动态设置 scrollable 容器的高度，也可以用这个
   var fixedHeight = $('.fixed-table').outerHeight();
   $('.scrollable-container').height($(window).height() - fixedHeight);

   // 窗口大小改变时重新计算高度
   $(window).resize(function () {
     var fixedHeight = $('.fixed-table').o