个人中心
gpt4 book ai didi

javascript - 无法更改 Bootstrap 中表格列的宽度

转载 作者：行者123 更新时间：2023-11-30 16:00:34 25 4
gpt4 key购买 nike

我有一个带表格的 jsp 页面，我需要它有固定大小的列。为了实现这一点，我正在使用 

    table {
        table-layout: fixed;
        word-wrap: break-word;
    }
问题是它修复了整个表格，尽管尝试了各种方法，但我无法缩短第一个表格的宽度。这怎么能实现。这是我的 Jsp 页面供引用 

<%@ 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>

最佳答案

使用 table-layout:fixed 浏览器不会等待所有行 - 一旦您获得第一行就会绘制表格。如果您需要指定列宽，则必须在第一行进行。

你的第一行是标题，所以设置

<th style="width:10%">

应该做的工作。之后您不必在任何行上设置它，因此您可以从 tds 中删除样式。

关于javascript - 无法更改 Bootstrap 中表格列的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37829486/

25 4 0
文章推荐： javascript - Bootstrap nav pills - 当第二个 nav pill 激活时，第一个 nav pill 数据仍然存在
文章推荐： javascript - 使用 html 和 javascript 添加两个数字
文章推荐： javascript - WebStorm 自动重新格式化 JS 代码选项 : newline after class declaration - before '{' ?
文章推荐： javascript - 使用 Login with Amazon 时遇到问题
行者123
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com