Evan Root Evan Root - 8 months ago 60
CSS Question

Not able to change the width of a table column in bootstrap

I have a jsp page with a table and i need it to have fixed sized columns . 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

<%@ page language="java" contentType="text/html; charset=UTF-8"
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
<!DOCTYPE html>
<html lang="en">
<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 -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
<link rel="stylesheet"
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<style type="text/css">

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

th {
#categorySelect {
text-align: center;

#categorySelect {
margin: auto;
width: 30%;

#123 {
margin: auto;
width: 50%;
p {
<jsp:include page="../shared/header.jsp">
<jsp:param value="editCategories" name="currentPage" />
<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 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">

<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<th>Present Value</th>
<th>Edited Value</th>
<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>
<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>
<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>
<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>
<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>
<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>

<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>


<script type="text/javascript">
$(function() {
$("#categoryMenu").change(function() {
var category = $("#categoryMenu").val();



function loadData(category) {
type : "GET",
data : {
categor : category
dataType : 'json',
url : "printCategoryDetails",
success : function(data) {
$("#id1").html("<strong>"+ data.id + "</strong>");
$("#catKey1").html("<strong>"+ data.catkey + "</strong>");
$("#name1").html("<strong>"+ data.name + "</strong>");
$("#icon1").html("<strong>"+ data.icon + "</strong>");
$("#iconWhite1").html("<strong>"+ data.icon_white + "</strong>");
$("#color1").html("<strong>"+ data.color+ "</strong>");

error : function() {





With table-layout:fixed browsers aren't waiting for all rows - tables are drawn once you get first row. 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.