This week's giveaway is in the EJB and other Java EE Technologies forum.
We're giving away four copies of EJB 3 in Action and have Debu Panda, Reza Rahman, Ryan Cuprak, and Michael Remijan on-line!
See this thread for details.
The moose likes Struts and the fly likes How can I put a table within scrollable area? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Frameworks » Struts
Bookmark "How can I put a table within scrollable area? " Watch "How can I put a table within scrollable area? " New topic
Author

How can I put a table within scrollable area?

kartic sahoo
Greenhorn

Joined: Sep 08, 2012
Posts: 4
Hi,

I am trying to create a css which will be used by html files, for creating tables of pre-defined style (as defined in the css). Additionally, I wanna put the table within a scrolling area so that in case my table got many columns, I can easily scroll it. Also, I have to set max allowed width of a column. Below are my css and html "

=============== tableStyle.css ===============
table {
font: 80% Verdana, Arial, Helvetica, sans-serif;
color: #000;
text-align: left;
border-collapse: collapse;
border: 1px solid #666666;
overflow:auto;
}

caption {
border: 1px solid #666666;
color: #ffffff;
background: #878787;
font-weight: bold;
text-align: center;
line-height: 30px;
border-radius: 0px ;
}

th {
border: 1px solid #666666;
color: #000000;
background: #C7C7C7;
font-weight: bold;
text-align: center;
line-height: 30px;
}

caption,th {
padding: .5em;
}

tr,td {
padding: .75em;
border: 1px solid #666666;
}

td,th {
max-width: 300px;
word-wrap: break-word;
}

tr.odd {
background-color: #000000;
}

tr:nth-child(even):hover,tr:nth-child(odd):hover {
background-color: #3d80df;
color: #ffffff;
max-width: 100px;
}

tr:nth-child(even) {background: #FFFFF0}
tr:nth-child(odd) {background: #FDF5E6}

============== OnchangeDemo ==================

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>On change Demo</title>
<link rel="stylesheet" href="css\tableStyle.css">
</head>
<body>

<table>
<caption>Table designs</caption>
<tr>
<th>Month </th>
<th>Savings</th>
<th>Month</th>
<th>Savings</th>
<th>Month</th>
<th>Month </th>
<th>Savings</th>
<th>Month</th>
<th>Savings</th>
<th>Month</th>
</tr>
<tr>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
<tr>
<td>January</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February $100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>$80 $100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100 $100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>January</td>
<td>$100 $100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
<td>Januarywwwwwwwwwww 2rdede rtfeeds ygfrdessw tfrdssd trewwewuyfheidje ediefrjio edjeijdo3</td>
<td>$100</td>
<td>January</td>
<td>$100</td>
<td>$100 4rjfndew erdjne,wdnmx edjcnxwmsx, efde,mced ce erfnked demnfkern xemnfjkew x</td>
</tr>
</table><br><br>
<input type="button" value="Submit" style="background-color:7ED2D3" />

</body>
</html>
--------------------------------------------------------------------------------------------



Now my problem is the table is not getting scrollable. Kindly help me to make it scrollable.

Kartic
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How can I put a table within scrollable area?
 
Similar Threads
Change the background color of a row in a table upon mouse click
Scroll table within a table not working
Table with fixed header and scolling body in Safari.
Page displaying in IE6 and older versions but not in Higher versions, chrome and firefox also.
Scroll of div fail to work when table row inside it is higlighted