无法在引导程序中更改表列的宽度

Question

I have a jsp page with a table and i need it to have fixed sized columns . 我有一个带表的jsp页面，我需要它具有固定大小的列。 to achieve this i am using 为了实现这一点，我正在使用

  table { table-layout: fixed; word-wrap: break-word; }

The problem is that it fixes the entire table and i am not able to shorten the width of the first despite trying various methods . 问题是，它固定了整个桌子，尽管尝试了各种方法，但我无法缩短第一个桌子的宽度。 How can this be achieved . 如何做到这一点。 Here's my Jsp page for the reference 这是我的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>

Answer 1

With table-layout:fixed browsers aren't waiting for all rows - tables are drawn once you get first row. 使用table-layout:fixed浏览器不会等待所有行-一旦获得第一行，便会绘制表。 If you need to specify columns width, you have to do it on first row. 如果需要指定列宽，则必须在第一行上进行。

Your first row is a header, so setting 您的第一行是标题，因此设置

<th style="width:10%">

should do the work. 应该做的工作。 You don't have to set it on any row afterwards, so you can just drop the style from tds. 之后，您不必在任何行上进行设置，因此只需从tds中删除样式即可。

无法在引导程序中更改表列的宽度

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-15 08:17:58

无法在引导程序中更改表列的宽度

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-15 08:17:58

解决方案1
2 已采纳 2016-06-15 08:17:58