Scrollable table inside another table - html

Question

Here is a piece of code that I have written to put 2 tables inside a bigger table. But i am not able to fix the size of <td> of the outer table. I want to make the <td> of outer table scrollable so that I can scroll the table inside the <td> of the outer table:
Fiddle
Example
<table id="maintable">
<tr>
<td>
<table class="smsSecond">
<tr style="background-color: #3C3C3C;">
<td colspan="2" width="auto" align="center">
Resolution
<!--img id="delete" src="icons/delete.png" height="10" width="10" style="float: right;"/-->
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Harsha P
</td>
<td>
-NA-
</td>
</tr>
</table>
</td>
<td>
<table class="smsSecond"><!--bgcolor="#4ab54d"><class="smsSecond"-- this is td bgcolor: bgcolor="#4ab54d"-->
<tr style="background-color: #3C3C3C;" >
<td colspan="2" width="auto" align="center">
Ticket Info
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center"><!-- style="color: #000000; font-size: 12px;"-->
<td>
Ticket number
</td>
<td>
HFK-864-69976
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center"><!--style="color: #000000; font-size: 15px; background-color: #FFFFFF" --><!--background-color: #A4EAF6-->
<td>
Department
</td>
<td>
Support
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Priority
</td>
<td>
P3-Normal
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Open Date and Time
</td>
<td>
2011-02-28 21:24:01
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Close Date and Time
</td>
<td>
2011-02-28 21:24:01
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Total Time
</td>
<td>
00:03:09
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Ticket Spent
</td>
<td>
00:02:00
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
No. of staff worked
</td>
<td>
2
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Ticket Status
</td>
<td>
Closed
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
SLA
</td>
<td>
Yes
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Type
</td>
<td>
Issue
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Red Flag
</td>
<td>
0
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Yellow Flag
</td>
<td>
0
</td>
</tr>
<!--even row-->
<tr class="evenrow" align="center">
<td>
Orange Flag
</td>
<td>
0
</td>
</tr>
<!--odd row-->
<tr class="oddrow" align="center">
<td>
Closed by
</td>
<td>
Harsha p
</td>
</tr>
</table>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
The CSS that I have used so far is:
.smsSecond{
border-radius: 4px;
padding: 8px 8px 8px 8px;
/*max-height: 333px;
overflow: scroll;*/
font-family:Arial;
font-size: 12px;
color: #FFFFFF;
background-color: #CACACA;
border: 1px solid black;
/*background-color: #1AB0EA;*/
}
.smsSecond .oddrow{
color: #000000;
font-size: 12px;
}
.smsSecond .evenrow{
color: #000000;
font-size: 12px;
background-color: #FFFFFF;
}
td{
padding:5px;
font-size: 13px;
width: 290px;
overflow: scroll;
text-overflow: string;
white-space: nowrap;
border: 1px solid black;
}
tr a{
color: #4EB145;
}
tr a:hover{
color: #4EB145;
text-decoration: none;
font-weight: bolder;
}
What should I use for the outer table's field to be of fixed size and scrollable?
What should be the CSS property of #maintable?
Please help.
Thanks in advance.

Answer 1

You can wrap you inner table within a div:
HTML:
<div class="inner_wrapper">
<table ...
CSS:
.inner_wrapper {
overflow:scroll;
height: 110px;
}
Here is the result:
http://jsfiddle.net/Ye2zV/

Answer 2

You can add the whole code of yours inside a div and add to it a height and overflow:auto;
fiddle:
http://jsfiddle.net/2nu5Q/
Hope it helps mate.
Bill.