我有一个带表的jsp页面，我需要它有固定大小的列。实现这个我正在使用
table {
table-layout: fixed;
word-wrap: break-word;
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Categories</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
table {
table-layout: fixed;
word-wrap: break-word;
}
th {
text-align:center;
}
#categorySelect {
text-align: center;
}
#categorySelect {
margin: auto;
width: 30%;
}
#123 {
margin: auto;
width: 50%;
}
p {
font:bold;
}
</style>
</head>
<body>
<jsp:include page="../shared/header.jsp">
<jsp:param value="editCategories" name="currentPage" />
</jsp:include>
<div class="row">
<div class="text-center">
<h2>Select Category</h2>
<div class="text-muted">
<h4>Choose a Category to Edit, Update and Schedule Changes</h4>
</div>
</div>
</div>
<div class="form-group" id="categorySelect">
<label for="categoryMenu">Select Category</label> <select
class="form-control" id="categoryMenu">
<option value="" disabled selected>Select Category</option>
<c:forEach items="${category}" var="catitem">
<option>${catitem}</option>
</c:forEach>
</select>
</div>
<br></br>
<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th>Property</th>
<th>Present Value</th>
<th>Edited Value</th>
</tr>
<tr>
<td style="width:10%" align="center"><strong>Id</strong></td>
<td class="col-sm-3"><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id"></td>
</tr>
<tr>
<td style="width:10%" align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey"></td> -->
<td class="col-sm-3"><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
</tr>
<tr>
<td style="width:10%" align="center"><strong>Name</strong></td>
<td class="col-sm-3"><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td style="width:10%" align="center"><strong>Icon</strong></td>
<td class="col-sm-3"><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td style="width:10%" align="center"><strong>Icon White</strong></td>
<td class="col-sm-3"><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td style="width:10%" align="center"><strong>Color</strong></td>
<td class="col-sm-3"><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
<script type="text/javascript">
$(function() {
$("#categoryMenu").change(function() {
var category = $("#categoryMenu").val();
loadData(category);
});
});
function loadData(category) {
$.ajax({
type : "GET",
data : {
categor : category
},
dataType : 'json',
url : "printCategoryDetails",
success : function(data) {
$("#id1").html("<strong>"+ data.id + "</strong>");
$("#id").val(data.id);
$("#id1").attr('disabled','disabled');
$("#id").attr('disabled','disabled');
$("#catKey").val(data.catkey);
$("#catKey1").html("<strong>"+ data.catkey + "</strong>");
$("#catKey1").attr('disabled','disabled');
$("#catKey").attr('disabled','disabled');
$("#name").val(data.name);
$("#name1").html("<strong>"+ data.name + "</strong>");
$("#name1").attr('disabled','disabled');
$("#icon").val(data.icon);
$("#icon1").html("<strong>"+ data.icon + "</strong>");
$("#icon1").attr('disabled','disabled');
$("#iconWhite1").html("<strong>"+ data.icon_white + "</strong>");
$("#iconWhite").val(data.icon_white);
$("#iconWhite1").attr('disabled','disabled');
$("#color1").html("<strong>"+ data.color+ "</strong>");
$("#color1").attr('disabled','disabled');
$("#color").val(data.color);
},
error : function() {
alert("error");
}
});
}
</script>
</body>
</html>
答案 0 :(得分：2)
table-layout:fixed浏览器不等待所有行 - 一旦获得第一行，就会绘制表格。如果需要指定列宽，则必须在第一行执行。
您的第一行是标题，因此设置
<th style="width:10%">
应该做的工作。之后您不必在任何行上设置它，因此您可以从tds中删除该样式。