cannot seem to set width of a column in a table in a .jsp page

I want to fix the width of a column but that doesn't seem to work.

The value in the column has no spaces, so it's one giant string.

I tried to fix the width like this:
      <td width="50" wrap>${ls.targetColumnName}</td>

but as you can see in the attachment, it still stretches out.
screen-shot-EDM.pdf
LVL 1
Alaska CowboyAsked:
Who is Participating?
 
Pramod KumarCommented:
Use the below css entry for that cell

<td style="word-wrap: break-word" width="100">ggggggggggggggggggggggggggggggggggggggggggggg</td>
0
 
Pramod KumarCommented:
plz attach the code for the table
0
 
Alaska CowboyAuthor Commented:
here's the code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	
	<title>EDM - Processing Status (Data)</title>
	
	<link rel="stylesheet" href="css/tablesorter.css" type="text/css" id="" media="print, projection, screen" />
	<link rel="stylesheet" href="css/thickbox.css" type="text/css" media="print,screen" />
	<link rel="stylesheet" href="css/edw.css" type="text/css" media="print,screen" />

	<script type="text/javascript" src="js/jquery-latest.js"></script> 
	<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
	<script type="text/javascript" src="js/thickbox.js"></script> 
	<script type="text/javascript" id="js">
	var t;
	$(document).ready(function() 
    		{         
    		t = setTimeout( "refresh()", 60*1000 );
    		
    		$("#refresh").click(function () {
    			if ($("#refresh:checked").length > 0) {
				  	$.post("refreshStatus.htm", {refresh: "true"}, function(data){}, "text");
				  } else {
				  	$.post("refreshStatus.htm", {refresh: "false"}, function(data){}, "text");				  	
				  }
    		});
    		
			$("#statusEDW").tablesorter();  
			
			$("#filterAll").click(function () { 
			      document.location='?filter=all'; 
			 });

			$("#filterEGRProd").click(function () { 
			      document.location='?filter=egrprod';
			 });

			$("#filterMemIDM").click(function () { 
			      document.location='?filter=mem'; 
			 });

			$("#filterClaim").click(function () { 
			      document.location='?filter=claim';
			 });

			$("#filterProv").click(function () { 
			      document.location='?filter=prov';
			 });
			 
			$("#filterRevenue").click(function () { 
			      document.location='?filter=revenue';
			 });
			 
    		} 
	); 
		function refresh()
		{
			//make sure there isn't a thickbox open right now
			if ( $("#TB_overlay").length == 0 ) {
				// make sure the checkbox isn't checked
				if ($("#refresh:checked").length > 0) {
					window.location.reload(false);
				} 
			} 
			t = setTimeout( "refresh()", 60*1000 );
		}
	</script>
	
	<script language="javascript"> 
        function coruAll(s) { 
                var cb = document.getElementsByTagName("input"); 
                for(var c=0;c<cb.length;c++) 
                        if(cb[c].className=="mycb") cb[c].checked = s; 
        } 
	</script> 
	
</head>
<body>
<div class="currenttime"><fmt:formatDate value="${model.now}" pattern="MMMM d, yyyy hh:mm a"/></div>
<c:set var="checkRefresh" value="checked"/>
<c:if test="${model.refresh == 'false'}">
	<c:set var="checkRefresh" value=""/>
</c:if>
<div class="refreshOption"><input type="checkbox" value="refresh" name="refresh" id="refresh" <c:out value="${checkRefresh}"/>/> Automatically refresh page every minute</div>
<h2>EDM Processing Status - Data <br/><br/></h2>

<a class="submit" id="filterAll"><span class="btn_lbg"><span class="btn_rbg">All</span></span></a>
<a class="submit" id="filterEGRProd"><span class="btn_lbg"><span class="btn_rbg">EGR / Product</span></span></a>
<a class="submit" id="filterMemIDM"><span class="btn_lbg"><span class="btn_rbg">Member / X-Walk IDM</span></span></a>
<a class="submit" id="filterClaim"><span class="btn_lbg"><span class="btn_rbg">Claim / P-Claim</span></span></a>
<a class="submit" id="filterRevenue"><span class="btn_lbg"><span class="btn_rbg">Revenue</span></span></a>
<a class="submit" id="filterProv"><span class="btn_lbg"><span class="btn_rbg">Provider</span></span></a>

<span id="statusLink">
<c:url value="edm_main_values.htm" var="valuesURL">
		<c:if test="${not empty model.filter}"><c:param name="filter" value="${model.filter}"/></c:if>
</c:url>
<a href="<c:out value="${valuesURL}" escapeXml="true"/>" alt="Valid Values Screen">View Valid Values Process Log</a>
&nbsp;&nbsp;
<c:url value="balance_metrics2.htm" var="balanceURL">
		<c:if test="${not empty model.filter}"><c:param name="filter" value="${model.filter}"/></c:if>
</c:url>
<a href="<c:out value="${balanceURL}" escapeXml="true"/>" alt="Balance Metrics">View Metrics Log</a>

<c:choose>
<c:when test="${fn:contains(pageContext.request.contextPath, 'edmdev')}">
	<span style="padding-left:15px;">You are currently in <strong>Development</strong></span>
</c:when>
<c:when test="${fn:contains(pageContext.request.contextPath, 'edmtest')}">
	<span style="padding-left:15px;">You are currently in <strong>Test</strong></span>
</c:when>
<c:when test="${fn:contains(pageContext.request.contextPath, 'edmstaging')}">
	<span style="padding-left:15px;">You are currently in <strong>Staging</strong> (Production data)</span>
</c:when>
<c:when test="${fn:contains(pageContext.request.contextPath, 'localhost')}">
	<span style="padding-left:15px;">You are currently in <strong>Development</strong> (sodstst2)</span>
</c:when>
</c:choose>

</span>

<table class="tablesorter" id="statusEDW" align="center" cellpadding="5">

<thead>
<tr>
	<th>Srce Cd / System</th>
	<th>Source - Table</th>
	<th>Source Column</th>
	<th>Target <br/>Schema</th>
	<th>Target Table</th>
	<th>Target Column</th>
	<th>Status</th>
	<th>Count</th>
	<td><input type="checkbox" onchange="coruAll(this.checked);" />&nbsp;Check / Uncheck all<br /></td>
</tr>
</thead>

<tbody>
<c:forEach var="ls" items="${model.list}">
<tr>
	<td>${ls.srceCd}</td>
	<td>${ls.srceName}</td>
	<td>${ls.srceColumnName}</td>
	<td>${ls.targetSchema}</td>
	<td>${ls.targetTableName}</td>
	<td width="50" wrap>${ls.targetColumnName}</td>
	<td>${ls.status}</td>
	<td>${ls.recordCount}</td>
	<td><input type="checkbox" class="mycb" /></td>
</tr>
</c:forEach>
</tbody>
</table>

</body>
</html>

Open in new window

0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Alaska CowboyAuthor Commented:
didn't work, see attachment.
Here's my line:

<td style="word-wrap: break-word" width="60" wrap>${ls.targetColumnName}</td>

fixed-width-question.pdf
0
 
Alaska CowboyAuthor Commented:
I removed the wayward "wrap" after "60" and still it's the full width (105)
0
 
Pramod KumarCommented:
The style is suggested is of CSS 3 and not all the browser (version) are supported yet.
I guess you are using firefox, may i know the version of it?
0
 
Pramod KumarCommented:
This is really a typical issue and for the time being we got any solution, you may use below:

<td><textarea wrap='hard' cols='15' rows='5' disabled>yourlongtextgoeshere</textarea></td>
0
 
Alaska CowboyAuthor Commented:
double quotes, I assume.
is this a max of 5 rows or fixed at 5 rows no matter the size ?
0
 
rrzCommented:
You could create a custom EL function to break up the String. See bottom of page at  
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/JSPIntro7.html 
and an example at  
http://www.experts-exchange.com/Programming/Languages/Java/J2EE/JSTL_Tags/Q_23398106.html 
Ask us here if you need help.  
<c:forEach var="ls" items="${model.list}">
<tr>
	<td>${ls.srceCd}</td>
	<td>${ls.srceName}</td>
	<td>${ls.srceColumnName}</td>
	<td>${ls.targetSchema}</td>
	<td>${ls.targetTableName}</td>
        <c:choose>
                  <c:when test="${fn:length(ls.targetColumnName) <= 50}">
                           <td width="50">${ls.targetColumnName}</td>
                  </c:when>
                  <c:otherwise>
                           <td width="50">${myFunction:breakUp(ls.targetColumnName)}</td>
                  </c:otherwise>
        </c:choose>
	<td>${ls.status}</td>
	<td>${ls.recordCount}</td>
	<td><input type="checkbox" class="mycb" /></td>
</tr>
</c:forEach>

Open in new window

0
 
rrzCommented:
Alternatively, an easier way would be to you replace underscores with spaces.
<c:forEach var="ls" items="${model.list}">
<tr>
	<td>${ls.srceCd}</td>
	<td>${ls.srceName}</td>
	<td>${ls.srceColumnName}</td>
	<td>${ls.targetSchema}</td>
	<td>${ls.targetTableName}</td>
        <td width="50">${fn:replace(ls.targetColumnName, "_" , " ")}</td>
	<td>${ls.status}</td>
	<td>${ls.recordCount}</td>
	<td><input type="checkbox" class="mycb" /></td>
</tr>
</c:forEach>

Open in new window

0
 
Alaska CowboyAuthor Commented:
rrz,
both look good, thank you !
will try out later today or tomorrow.
0
 
Alaska CowboyAuthor Commented:
I ended up just breaking up the string in Oracle at position 50, and that was good enough.
but I got my tips from you to do it the right way . . . thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.