1
私はテーブルを持つjspページを持っており、固定サイズの列を持つ必要があります。これを達成するために、私はブートストラップでテーブル列の幅を変更できません
table {
table-layout: fixed;
word-wrap: break-word;
}table-layout:fixedのブラウザで
<%@ page language="java" contentType="text/html; charset=UTF-8"
\t pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
\t 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"
\t href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
\t 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
\t src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
\t 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 {
\t text-align: center;
}
#categorySelect {
\t margin: auto;
\t width: 30%;
}
#123 {
\t margin: auto;
\t width: 50%;
}
p {
\t font:bold;
}
</style>
</head>
<body>
\t <jsp:include page="../shared/header.jsp">
\t \t <jsp:param value="editCategories" name="currentPage" />
\t </jsp:include>
\t <div class="row">
\t \t <div class="text-center">
\t \t \t <h2>Select Category</h2>
\t \t \t <div class="text-muted">
\t \t \t \t <h4>Choose a Category to Edit, Update and Schedule Changes</h4>
\t \t \t </div>
\t \t </div>
\t </div>
\t <div class="form-group" id="categorySelect">
\t \t <label for="categoryMenu">Select Category</label> <select
\t \t \t class="form-control" id="categoryMenu">
\t \t <option value="" disabled selected>Select Category</option>
\t \t \t <c:forEach items="${category}" var="catitem">
\t \t \t \t <option>${catitem}</option>
\t \t \t </c:forEach>
\t \t </select>
\t </div>
\t <br></br>
\t <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>
\t \t </tr>
\t \t <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>
\t \t <td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
\t \t </tr>
\t \t <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>
\t \t </tr>
\t \t <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>
\t \t </tr>
\t \t <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>
\t \t </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>
\t \t </tr>
<tr>
<td colspan="3" align="center">
\t \t <div class="form-group">
\t \t \t <button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
\t \t </div>
\t \t </td>
\t \t </tr>
</table>
</div>
\t </form>
\t <script type="text/javascript">
\t \t $(function() {
\t \t \t $("#categoryMenu").change(function() {
\t \t \t \t var category = $("#categoryMenu").val();
\t \t \t \t loadData(category);
\t \t \t });
\t
\t \t });
\t \t
\t \t function loadData(category) {
\t \t \t $.ajax({
\t \t \t \t type : "GET",
\t \t \t \t data : {
\t \t \t \t \t categor : category
\t \t \t \t },
\t \t \t \t dataType : 'json',
\t \t \t \t url : "printCategoryDetails",
\t \t \t \t success : function(data) {
\t \t \t \t \t $("#id1").html("<strong>"+ data.id + "</strong>");
\t \t \t \t \t $("#id").val(data.id);
\t \t \t \t \t $("#id1").attr('disabled','disabled');
\t \t \t \t \t $("#id").attr('disabled','disabled');
\t \t \t \t \t $("#catKey").val(data.catkey);
\t \t \t \t \t $("#catKey1").html("<strong>"+ data.catkey + "</strong>");
\t \t \t \t \t $("#catKey1").attr('disabled','disabled');
\t \t \t \t \t $("#catKey").attr('disabled','disabled');
\t \t \t \t \t $("#name").val(data.name);
\t \t \t \t \t $("#name1").html("<strong>"+ data.name + "</strong>");
\t \t \t \t \t $("#name1").attr('disabled','disabled');
\t \t \t \t \t $("#icon").val(data.icon);
\t \t \t \t \t $("#icon1").html("<strong>"+ data.icon + "</strong>");
\t \t \t \t \t $("#icon1").attr('disabled','disabled');
\t \t \t \t \t $("#iconWhite1").html("<strong>"+ data.icon_white + "</strong>");
\t \t \t \t \t $("#iconWhite").val(data.icon_white);
\t \t \t \t \t $("#iconWhite1").attr('disabled','disabled');
\t \t \t \t \t $("#color1").html("<strong>"+ data.color+ "</strong>");
\t \t \t \t \t $("#color1").attr('disabled','disabled');
\t \t \t \t \t $("#color").val(data.color);
\t \t \t \t
\t \t \t \t },
\t \t \t \t error : function() {
\t \t \t \t \t alert("error");
\t \t \t \t }
\t \t \t });
\t \t }
\t </script>
</body>
</html>