javascript - 固定标题后列表标题未对齐-6ren

javascript - 固定标题后列表标题未对齐

转载作者：行者123 更新时间：2023-11-28 02:47:14

我修复了表格的标题，但现在标题的列不再与可滚动的正文行对齐:http://imgur.com/a/Pn9Qe (看第二张表)。我不知道这种错位的原因。这是我完整的 html 文件:

<html>  
  <head>    
    
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>  
      
    <title>Pannello dipendenti</title>  
       <link rel="shortcut icon" href="puzzle2.png" />
 <script type="text/javascript">  
            var app = angular.module("StaffManagement", []);  
           
            //Controller Part  
            app.controller("StaffController", function($scope, $http) {  
                
                 
                $scope.staffs = [];  
                $scope.staffLast = [];  
                $scope.staffForm = {  
                      idstaff : -1,    
                        staffType: {
                        idstaffType: 2,
                        type: "Dipendente"
                      },
                      name: "",
                      surname: "",
                      birthDate: "",
                      phone: "",
                      gender: true,
                      staffLogin: {
                        idstaffLogin: -1,
                        email: "",
                        pass: "",
                         
                      }
                };  
                
                $scope.staffLoginForm = {  
                      idstaffLogin: -1,
                      email: "",
                      pass: ""
                };  
                
                 $scope.selectg = [
                     {name:'uomo', type: true},
                     {name:'donna', type: false}
                ];

                console.log($scope.staffForm.gender);
           
                //Now load the data from server  
                _refreshStaffData();  
           
                //HTTP POST/PUT methods for add/edit country   
                // with the help of id, we are going to find out whether it is put or post operation  
                  
                $scope.submitStaff = function() {  
           
                    if ($scope.staffForm.idstaff == -1) {  
                        //Id is absent in form data, it is create new country operation 
                        $http({  
                        method : 'POST',  
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/staff',  
                        data : angular.toJson($scope.staffForm),  
                        headers : {  
                            'Content-Type' : 'application/json'  
                        }  
                    }).then( _giveLast, _error );  
                        
                        
                    } else {  
                     //   console.log("CCC");
                        //Id is present in form data, it is edit country operation  
                        $http({  
                        method : 'PUT',  
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/staff',  
                        data : angular.toJson($scope.staffForm),  
                        headers : {  
                            'Content-Type' : 'application/json'  
                        }
                    }).then( _putStaffLogin, _error ); 
                    }  
                    
                    console.log($scope.staffForm.gender);
                    console.log($scope.staffForm.idstaff);
                    
                };  
                //HTTP DELETE- delete country by Id  
                $scope.deleteStaff = function(staff) {  
                    $http({  
                        method : 'DELETE',  
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/staff/' + staff.idstaff  
                    }).then(_success, _error);  
                };  
   
             // In case of edit, populate form fields and assign form.id with country id  
                $scope.editStaff = function(staff) {  
                    
                    $scope.staffForm.name = staff.name;  
                    $scope.staffForm.idstaff = staff.idstaff; 
                    $scope.staffForm.surname = staff.surname;   
                    $scope.staffForm.birthDate = staff.birthDate;  
                    $scope.staffForm.phone = staff.phone; 
                //    $scope.staffForm.gender = staff.gender;  
                    $scope.selectg.type = staff.gender;  
                    $scope.staffForm.staffLogin.idstaffLogin = staff.staffLogin.idstaff;
                    $scope.staffForm.staffLogin.email = staff.staffLogin.email;
                    $scope.staffForm.staffLogin.staff = "";
            //        $scope.staffForm.pass = "prova";
                    console.log(staff.staffLogin.email);
                };  
           
                /* Private Methods */  
                //HTTP GET- get all countries collection  
                function _refreshStaffData() {  
                    $http({  
                        method : 'GET',  
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/staff'  
                    }).then(function successCallback(response) {  
                        $scope.staffs = response.data;  
                    }, function errorCallback(response) {  
                        console.log(response.statusText);  
                    });  
                }  
           
                function _success(response) {  
                   // console.log(staff.name);
                    console.log("successo");
                    
                    _refreshStaffData();  
                    _clearFormData();
                    _showSB();
                    console.log("cleared");
                }  
           
                function _error(response) {  
                    console.log("qualcosa è andata male");
                    console.log(response.statusText);  
                }  
           
                //Clear the form  
                function _clearFormData() {  
                    $scope.staffForm.idstaff = -1; 
                    $scope.staffForm.name = "";  
                    $scope.staffForm.surname = "";   
                    $scope.staffForm.birthDate = "";  
                    $scope.staffForm.phone = ""; 
                    $scope.staffForm.gender = true;
                    $scope.staffForm.idstaffLogin = -1;
                    $scope.staffForm.email = "asdsd";
                    $scope.staffForm.pass = "";
                  
                };  
                
                function _giveLast(){ 
                    
                    console.log("yes");
                    console.log($scope.staffForm);
                     
                        $http({  
                        method : 'GET',
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/staff/getlast'  
                        }).then(function successCallback(response) {  
                        $scope.staffLast = response.data; 
                             console.log($scope.staffLast.idstaff);
                            _postStaffLogin();
                    }, function errorCallback(response) {  
                        console.log(response.statusText);  
                    });  
                   
                                          
                }
           
     
                function _postStaffLogin(){ 
                    console.log($scope.staffForm.staffLogin.email);
                    console.log($scope.staffLast.idstaff);
                     //console.log($scope.staffForm.staffLogin.idstafflogin);
                     //$scope.staffForm.staffLogin.staff = $scope.staffLast;
                    //$scope.staffLoginForm.staff = $scope.staffLast;
                   
                    $scope.staffLoginForm.idstaffLogin = $scope.staffLast.idstaff;
                    $scope.staffLoginForm.email = $scope.staffForm.staffLogin.email;
                    $scope.staffLoginForm.pass = "ab";
                    console.log($scope.staffLoginForm.idstaffLogin);
                    console.log($scope.staffLoginForm.email);
                    console.log($scope.staffLoginForm.pass);
   
                     $http({  
                        method : 'POST',  
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/stafflogin',  
                        data : angular.toJson($scope.staffLoginForm),  
                        headers : {  
                            'Content-Type' : 'application/json'  
                        }  
                    }).then( _success, _error );  
                }
                
                 function _putStaffLogin(){ 
                    
                     console.log("CIAOOOO");
                    $scope.staffLoginForm.idstaffLogin = $scope.staffForm.idstaff;
                    $scope.staffLoginForm.email = $scope.staffForm.staffLogin.email;
                    $scope.staffLoginForm.pass = "ab";
                    console.log($scope.staffLoginForm.idstaffLogin);
                    console.log($scope.staffLoginForm.email);
                    console.log($scope.staffLoginForm.pass);
   
                     $http({  
                        method : 'PUT',  
                        url : 'http://localhost:8080/FoodDrinkDispener/rest/stafflogin',  
                        data : angular.toJson($scope.staffLoginForm),  
                        headers : {  
                            'Content-Type' : 'application/json'  
                        }  
                    }).then( _success, _error );  
                }
                
                function _showSB() {
                    // Get the snackbar DIV
                    var x = document.getElementById("snackbar")

                    // Add the "show" class to DIV
                    x.className = "show";

                    // After 3 seconds, remove the show class from DIV
                    setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
                }
            
      }); 

        </script>  
        <style>  
            body {
                background-color: lightblue;
            }
        .blue-button{  
            background: #25A6E1;  
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);  
            padding:3px 5px;  
            color:#fff;  
            font-family:'Helvetica Neue',sans-serif;  
            font-size:12px;  
            border-radius:2px;  
            -moz-border-radius:2px;  
            -webkit-border-radius:4px;  
            border:1px solid #1A87B9  
               }       

        .red-button{  
            background: #CD5C5C;  
            padding:3px 5px;  
            color:#fff;  
            font-family:'Helvetica Neue',sans-serif;  
            font-size:12px;  
            border-radius:2px;  
            -moz-border-radius:2px;  
            -webkit-border-radius:4px;  
            border:1px solid #CD5C5C  
            }        
  
       table {  
           font-family: "Helvetica Neue", Helvetica, sans-serif;  
           width: 90%;  
           align-content: center;
           align-self: center;
           align-items: center;
           text-align: center;
           text-align-last: center;
           vertical-align: center;
           margin-left: auto;
           margin-right: auto;
       }  
  
       caption {  
           text-align: left;  
           color: silver;  
           font-weight: bold;  
           text-transform: uppercase;  
           padding: 5px;  
       }  
  
       th {  
           background: SteelBlue;  
           color: white;  
       }  
  
  
       tbody tr:nth-child(even) {  
           background: WhiteSmoke;  
       }  
  
       tbody tr td:nth-child(2) {  
           text-align:center;  
       }  
  
       tbody tr td:nth-child(3),  
       tbody tr td:nth-child(4) {  
           text-align: center;  
           font-family: monospace;  
       }  
  
       tfoot {  
           background: SeaGreen;  
           color: white;  
           text-align: right;  
       }  
  
       tfoot tr th:last-child {  
           font-family: monospace;  
       }  
  
       td,th{  
            border: 1px solid gray;  
            width: 25%;  
            text-align: left;  
            padding: 5px 10px;  
        }  
                       
        .button2{  
            background: lawngreen; 
            cursor: pointer;
            filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#25A6E1',endColorstr='#188BC0',GradientType=0);  
            padding:3px 5px;  
            color:#fff;  
            font-family:'Helvetica Neue',sans-serif;  
            font-size:12px;  
            border-radius:2px;  
            -moz-border-radius:2px;  
            -webkit-border-radius:4px;  
            border:1px solid #1A87B9  
           } 
            
             
        #footer_bar {
            background-color: lightblue;
            width: 100%;
            /* posizionamento in fondo alla pagina */
            position: fixed;
            top: 0;
            
        }
         #div2 {
            background-color: lightblue;
            width: 100%;
            /* posizionamento in fondo alla pagina */
            
        }
            
        .scrollable { }
        .scrollable thead {}
        .scrollable tbody {
            margin: 0; padding: 0;
            height: 55%;
            width: 90%;
            position: absolute;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        tr:hover td{background: #FFF}
            
        /* The snackbar - position it at the bottom and in the middle of the screen */
        #snackbar {
            visibility: hidden; /* Hidden by default. Visible on click */
            min-width: 250px; /* Set a default minimum width */
            margin-left: -125px; /* Divide value of min-width by 2 */
            background-color: #4d4dff; /* Black background color */
            color: #fff; /* White text color */
            text-align: center; /* Centered text */
            border-radius: 2px; /* Rounded borders */
            padding: 16px; /* Padding */
            position: fixed; /* Sit on top of the screen */
            z-index: 1; /* Add a z-index if needed */
            left: 50%; /* Center the snackbar */
            bottom: 30px; /* 30px from the bottom */
        }
            
                        /* Show the snackbar when clicking on a button (class added with JavaScript) */
        #snackbar.show {
            visibility: visible; /* Show the snackbar */

            /* Add animation: Take 0.5 seconds to fade in and out the snackbar. 
            However, delay the fade out process for 2.5 seconds */
            -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
            animation: fadein 0.5s, fadeout 0.5s 2.5s;
        }
            
                        /* Animations to fade the snackbar in and out */
         @-webkit-keyframes fadein {
            from {bottom: 0; opacity: 0;} 
            to {bottom: 30px; opacity: 1;}
        }

        @keyframes fadein {
            from {bottom: 0; opacity: 0;}
            to {bottom: 30px; opacity: 1;}
        }

        @-webkit-keyframes fadeout {
            from {bottom: 30px; opacity: 1;} 
            to {bottom: 0; opacity: 0;}
        }

        @keyframes fadeout {
            from {bottom: 30px; opacity: 1;}
            to {bottom: 0; opacity: 0;}
        }
    </style>  
    <head>  
    <body ng-app="StaffManagement" ng-controller="StaffController">  
        
        
            
         <h1 align=center style="color: #334d99">  
           PANNELLO DIPENDENTI  
        </h1>   
        
        <form ng-submit="submitStaff()">  
            
            <table>  
                 
                <tr>  
                    <th colspan="4">Aggiungi/Modifica dipendente</th>  
                 </tr>  
                <tr>  
                    <td>Id</td>  
                    <td><input type="text" ng-model="staffForm.idstaff" /></td>  
                    <td>Sesso</td>  
                    <td><select ng-model="staffForm.gender" ng-options="opt.type as opt.name for opt in selectg" ></td>  
                </tr> 
                <tr>  
                    <td>Nome</td>  
                    <td><input type="text" ng-model="staffForm.name" /></td>  
                    <td>Telefono</td>  
                    <td><input type="text" ng-model="staffForm.phone"  /></td>  
                </tr>  
                <tr>  
                    <td>Cognome</td>  
                    <td><input type="text" ng-model="staffForm.surname"  /></td>  
                    <td>Email</td>  
                    <td><input type="text" ng-model="staffForm.staffLogin.email" /></td> 
                </tr>  
                <tr>
                <td>Data di Nascita</td>  
                    <td><input type="date('2015-03-25'')" ng-model="staffForm.birthDate" /></td>  
                    <td></td>  
                    <td></td> 
                </tr>  
         <!--       <tr>  
                    <td>Telefono</td>  
                    <td><input type="text" ng-model="staffForm.phone"  /></td>  
                </tr>  -->
                
                 
                
                <tr>  
                    <td colspan="4" ><input  style="width:200px" onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" type="submit" value="Invia" class="blue-button" /></td>  
                </tr>   
            </table>  
        </form>
        
    
      
      
        <table id="thetable" class="scrollable">  
            <thead>
            <tr>  
                <th>Nome</th>  
                <th>Cognome</th>  
                <th>Data di Nascita</th>   
                <th>Telefono</th>  
                <th>Sesso</th> 
                <th>StaffId</th>
                <th>Email</th> 
                <th>Azioni</th> 
            </tr>  
            </thead>
            <tbody>
            <tr ng-repeat="staff in staffs">  
                 
            <td> {{ staff.name }}</td>  
            <td> {{ staff.surname }}</td>    
            <td> {{ staff.birthDate }}</td>
            <td> {{ staff.phone }}</td>  
            <td> {{ staff.gender }}</td>  
            <td> {{ staff.idstaff }}</td>  
            <td> {{ staff.staffLogin.email }}</td> 
    
                  
                <td><a onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" ng-click="editStaff(staff)" class="blue-button">Edit</a><a onmouseover="this.className='button2'" onmouseout="this.className='red-button'" ng-click="deleteStaff(staff)" class="red-button">Delete</a></td>  
            </tr>  
            </tbody>
        </table>  
        
    <div id="snackbar">Success</div>
             
        
  </body>  
</html>

特别是，这是我用于标题修复的 CSS:

.scrollable { }
        .scrollable thead {}
        .scrollable tbody {
            margin: 0; padding: 0;
            height: 55%;
            width: 90%;
            position: absolute;
            overflow-x: hidden;
            overflow-y: scroll;
        }

这是我的表格代码:

<table id="thetable" class="scrollable">  
            <thead>
            <tr>  
                <th>Nome</th>  
                <th>Cognome</th>  
                <th>Data di Nascita</th>   
                <th>Telefono</th>  
                <th>Sesso</th> 
                <th>StaffId</th>
                <th>Email</th> 
                <th>Azioni</th> 
            </tr>  
            </thead>
            <tbody>
            <tr ng-repeat="staff in staffs">  
                 
            <td> {{ staff.name }}</td>  
            <td> {{ staff.surname }}</td>    
            <td> {{ staff.birthDate }}</td>
            <td> {{ staff.phone }}</td>  
            <td> {{ staff.gender }}</td>  
            <td> {{ staff.idstaff }}</td>  
            <td> {{ staff.staffLogin.email }}</td> 
    
                  
                <td><a onmouseover="this.className='button2'" onmouseout="this.className='blue-button'" ng-click="editStaff(staff)" class="blue-button">Edit</a><a onmouseover="this.className='button2'" onmouseout="this.className='red-button'" ng-click="deleteStaff(staff)" class="red-button">Delete</a></td>  
            </tr>  
            </tbody>
        </table>

我希望有人能帮助我。

最佳答案

未对齐是因为在您的 css 中指定的 thead 的绝对定位

从 .scrollable tbody 中移除 position:absolute

关于javascript - 固定标题后列表标题未对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40985037/

文章推荐： c++ - 如何在内联汇编中实现这个？

文章推荐： javascript - 突出显示菜单上的当前项目

文章推荐： c++ - 在 vector 指针中添加一个对象

文章推荐： javascript - 将 yui 与 javascriptmvc 集成

html - 标题/标题
我附上了一个我尝试使用 html/css 实现的示例(如果您看不到图像:名字和姓氏，然后第二行是职位描述)。我希望所有文本(两行)在一个 div 中强制对齐(左和右)，但我不确定这是否可能。我尝试了一
html - Div 标题/标题
我想使两个 h1 元素成为 div 上的标题/页眉。所以每个都在特定的 div 之上。 Youtube Achievements
Android EditText 标题(标题)就像在 android 指南中
我想让每个 EditText 对象都有自己的标题，就像 Pure Android 指南中那样 (screenshot) 这个东西有原生支持吗？我想他们也可能会使用带有部分的 ListView ，但这对
swift - UICollectionView 标题 View 类似于表格 View 标题(不是节标题)
是否可以像 UITableView headerView 一样创建 UICollectionView 标题 View ？我的意思是整个集合 View 的标题 View ，而不是每个部分的重复 View
android - Material Design 排版 - 标题、标题、间距、文本外观
我一直在遵循有关排版的 Google 官方 Material 设计指南 (http://www.google.com/design/spec/style/typography.html)，但我发现它们
python - 是否有 Python 库来提取视频元数据，例如 [标题、描述、标题/字幕]？
我目前正在尝试找到可以帮助我从视频文件中提取元数据或信息的 python 库，例如 [ mp4, Mkv, Avi, WebM, mpg ] 格式为例。我主要从视频文件中提取的主要数据是 [标题、描
html - Bootstrap 缩略图 - 中心内容(img + 标题)，标题 float :left
你好，这是我正在尝试做的: 将每个缩略图的内容(img + 标题)居中。我的 img 必须是 span3，标题必须是 span4。这是我的问题: 我可以获取内容中心，或者标题 float 在 im
ios - UINavigationBar 后退按钮在某些设备或模拟器上显示 "Back"标题，在其他设备或模拟器上显示之前的 View Controller 标题
我有一个带有导航栏的应用程序，可以从一个 View Controller 导航到下一个 View Controller 。在某些模拟器和设备上导航到下一个 View Controller 时，后退按钮
sql - t-sql 这是如何工作的？ SELECT @MyList = ISNULL(@MyList ,'') + 标题 + ', ' FROM 标题
我遇到了一些非常酷的 t-sql，可以从一个 t-sql 查询中的选定行生成一个逗号分隔的列值列表: SELECT @MyList = ISNULL(@MyList,'') + Title + ',
HTML 标题
请确保将 HTML heading 标签只用于标题。不要仅仅是为了生成粗体或的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标
每页上的 wkhtmltopdf 标题
我正在使用 wkhtmltopdf 将 html 转换为 pdf。我想在每个页面中添加标题，但它只显示在第一页(目录)中。我使用的命令是 "C:\Program Files\wkhtmltopdf
r - 如何在ggplot2中显示obs的方向(标题)
如何使用 ggplot2 显示观察的方向(标题)？有没有办法调整shape=17 (三角形)以便它“指向”下一次观察？示例代码 library(ggplot2) dat % pivot_wide
macos - 标题&&关闭按钮不显示
我尝试在 cocoa 应用程序中显示/隐藏标题栏。我使用以下代码: if ([window styleMask]==NSResizableWindowMask) { [wind
文本字段上的 JavaScript 标题
我有这样的 HTML 标题 http://s1.postimg.org/4ebyk3qwv/image.png 当我编写这段代码时: document.getElementById("TL85_1_
wordpress - 在Facebook上与视频共享URL不显示描述/标题
我叫麦克。谢谢你的帮助。在Wordpress中，我们已经设计了我们的网站，以便在Facebook调试器中og数据尽可能接近youtube。尽管如此，在Facebook上共享视频的方式还是不同的。尽管
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
scala - 返回确切的响应/标题？
从 web 应用程序的客户端，我点击了服务器端路由，它只是第三方 API 的包装器。使用分派(dispatch)，我试图让服务器端请求返回 exact header 和第三方 API 对客户端 AJA
SAPUI5 - 标题、侧边栏和导航
我是 SAPUI5 的新手，在导航、侧边栏和标题方面遇到一些问题。我想开发一个带有标题和侧边栏的应用程序。我为此使用“ToolPage”。每个页面都包含工具页，如下所示:
go - “标题”注释的目的
我最近在为客户做的项目中被介绍给Go。他们已经建立了代码库，需要进行一些更改。我注意到所有的方法，结构等等都有一些奇怪的类似于标题的注释，如下所示: // SomeType ... type Som
java - ListView 标题
我创建了一个采用整个屏幕布局的标题布局(xml 文件)... 我还创建了一个 listView 并将此 header_layout 添加到 listView 中: LayoutInflater inf

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 固定标题后列表标题未对齐