File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
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
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?