我修复了表的标题，但现在标题的列不再与可滚动的正文行对齐：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>
我希望有人可以帮助我。
答案 0 :(得分：0)
错位是因为你的css中指定的thead的绝对定位
从position:absolute
.scrollable tbody