How I can draw lines in a web page? - html

I intend to add some lines into an HTML table that marks grouping rows. See below picture.
Is it possible to draw those blue lines in the table? Thanks.
http://jsbin.com/kogijixici/1/edit?html,output
<table><tr></tr></table>


Use the following css, and you will get your result:
td[rowspan] {
position: relative;
}
td[rowspan]:before {
content: '';
height: 80%;
width: 20%;
border: 2px solid blue;
border-right: none;
position: absolute;
top: 10%;
right: 10px;
}
Here is the link to jsbin: http://jsbin.com/juzasemeje/edit?html,css,output
You can customise the values a little to match your requirements.


Try this
.td-line {
position: relative;
}
.td-line:before {
content: '';
display: block;
width: 20px;
height: 73%;
position: absolute;
right: 10px;
top: 13%;
border-top: solid 1px blue;
border-bottom: solid 1px blue;
border-left: solid 1px blue;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<table border="1">
<tr>
<th width="150" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
<th width="100" scope="col"> </th>
</tr>
<tr>
<td rowspan="3" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td rowspan="4" class="td-line"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<p> </p>
</body>
</html>


is this output ru expecting
check output in Jsbin.com
.border{
border-top:2px solid blue;
border-left:2px solid blue;
border-bottom:2px solid blue;
height:50px;
width:20px;
position:relative;
left:100px;
bottom:10px
}
update ur css as above

Related

how to prevent the tbody from overlapping with tfoot

I would like to create a html template that when print in chrome browser, the header and footer will fixed on the top and bottom of the page. The tbody will be in between of header and footer. It's height is the total height after minus header and footer. If the tbody exceed the height, it will break into next page. Now, I am having issue that when printing the html template, the tbody will overlap the tfoot and thead on the next page, as shown in these pictures. Please kindly advice. My html template is on the below github link.
.
The HTML is in my github repository. Please help to check on this link.
MyTemplate
Below is my code and my reference for dealing page break for large html table.
Reference
This is a short snippet of my code structure
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
html,
body,
* {
margin: 0;
padding: 0;
}
table {
page-break-inside: auto;
border-collapse: collapse;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
td {
page-break-inside: avoid;
page-break-after: auto
}
div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group
}
/* tbody {
display: table;
width: 100%;
table-layout: fixed;
} */
#media screen {
div.divFooter {
display: none;
}
div.divHeader {
display: none;
}
}
#media print {
div.divFooter {
position: fixed;
height: 250px;
bottom: 0;
left: 0;
text-align: left;
display: block;
}
div.divHeader {
position: fixed;
height: 100px;
top: 0;
left: 0;
display: block;
}
div.divBody {
height: calc(100% - 350px);
position: relative;
text-align: left;
margin-top: 20rem;
margin-bottom: -20rem;
page-break-after: always;
}
}
</style>
</head>
<body>
<table style="width: 100%;">
<thead>
<tr>
<th>
<div class="divHeader" style="display: inline-block; width: 100%;">
<table style="width: 100%; text-align: left;">
<tr>
<td><img style="width: 120px; height: 120px;"
src="https://bp.doctor2u.my/assets/img/bplogo.png">
</td>
<td style="vertical-align: top; ">
<table>
<tr style="margin-left: 1 rem;">
<td colspan="2">
<a
style="font-family:Helvetica;font-weight: bold; font-size: 20pt;">
PATHOLOGY
REPORT
</a>
</td>
</tr>
<tr>
<td colspan="2">
<span>B. P. CLINICAL LAB SDN. BHD. (152314-H)</span>
</td>
</tr>
<tr>
<td>
<span>[BranchAddress] ,</span>
</td>
<td>
<span> [BranchEmail]</span>
</td>
</tr>
<tr>
<td>
<label>Tel : </label><span>[BranchTel]</span>
</td>
<td>
<label>Fax : </label><span>[BranchFax]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>GST Reg No. : </label><span>[GST]</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%; text-align: left;">
<tr>
<td>
<label>Client PatientID :</label><span>[ClientId]</span>
</td>
<td colspan="2">
<label>Barcode :</label><span>[LabNo]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Patient Name :</label><span>[PatientName]</span>
</td>
<td>
<label>Age/Gender :</label><span>[Age] / [Gender]</span>
</td>
</tr>
<tr class="spaceUnder">
<td>
<label>NRIC No :</label><span>[IC]</span>
</td>
<td>
<label>Refer No :</label><span>[ReferNo]</span>
</td>
<td>
<label>Branch :</label><span>[BranchName]</span>
</td>
</tr>
<tr>
<td colspan="2">
<label>Client Name :</label><span>[ClinicName]</span>
</td>
<td>
<label>Tel :</label><span>[Tel]</span>
</td>
</tr>
<tr class="spaceUnder2">
<td colspan="2">
<label>Doctor’s Name :</label><span>[DoctorName]</span>
</td>
<td>
<label>Fax:</label><span>[Fax]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Specimen :</label><span>[Specimen]</span><span>-sampled at
</span><span>[SampleDate]</span>
</td>
</tr>
<tr>
<td colspan="3">
<label>Received :</label><span>[LabNo] by [ReceivedBranch]
[ReceiveDate]</span>
</td>
</tr>
</table>
<label for="" style="float: right;">Page 2 of 3</label>
<table
style="border-top: 5px solid black; width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<tr class="spaceUnder">
<th>
<label for="">TEST NAME</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
<th>
<label for="">RESULT</label>
</th>
<th>
<label for="">UNIT</label>
</th>
<th>
<label for="">REFERENCE NOTE</label>
</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
<div class="divFooter" style="display: inline-block; width: 100%; left:0px;
bottom:0px; text-align: left;">
<table style="width: 100%; margin-top: 1rem;">
<tr>
<td rowspan="7" style="width: 20%;">
<!-- [Image] -->
</td>
</tr>
<tr>
<td>
Results validated and authorised through the Laboratory information
System.
</td>
</tr>
<tr>
<td>
Results checked and authorised for release
</td>
</tr>
<tr>
<td>
Test done at B.P. Clinical Lab Sdn. Bhd. (Ipoh) 273-B Jalan Raja
Permaisuri
Bainun,
30250
Ipoh, Perak.
</td>
</tr>
<tr>
<td>
Tel: 05-2559090 Fax:05-2419226
</td>
</tr>
<tr>
<td>
Ipoh lab is a MS ISO 15189 accredited lab
</td>
</tr>
<tr>
<td>
* Not SAMM Accredited
</td>
</tr>
<tr>
<td colspan="4">
<p style=" margin-top: 1rem; text-align: center;">
For further confirmation, please
repeat test with another
fresh
specimen, if desired.
Should
you
have further enquiries, please
contact your nearest BP branch or mail us at
corpcare#bphealthcare.com
<br>
[BranchAddress], [BranchEmail]
Tel: <span>[Tel]</span>,
Fax: [Fax]
</p>
</td>
</tr>
</table>
</div>
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>
<div class="divBody">
<table style="width: 100%; border-spacing: 1rem; text-align: center;"
class="spaceUnderTable">
<!-- LIPIDS STUDIES -->
<tr>
<td style="text-align: left;">
<label for=""><strong>Full Blood Count</strong></label>
</td>
</tr>
<tr>
<td style="text-align: left;">
<label for="">Total RBC</label>
</td>
<td>
<label for="">[TotalRBCResult]</label>
</td>
<td>
<label for="">[TotalRBCUnit]</label>
</td>
<td>
<label for="">[TotalRBCRange]</label>
</td>
<td>
<label for="">[TotalRBCResult2]</label>
</td>
<td>
<label for="">[TotalRBCUnit2]</label>
</td>
<td>
<label for="">[TotalRBCRange2]</label>
</td>
</tr>
<!-- More row -->
<br>
<br>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Is it possible to wrap content dynamically?

I feel like this should be easy but I can't get it. I have a left column which can be anywhere from 20 to 2000 pixels tall. I then have a mixture of content: tables, (optionally floating div's), text and images for the rest of the page.
I want multiple rows to wrap as needed next to the side column. Then when the side column is done wrapping will consume the space. I have a sample up on JSFiddle which demonstrates the problem.
I originally thought a flex container with a left floating column would this, however it is not working.
https://jsfiddle.net/heegar/c40wf28c/
CSS
.flexContainer {
display: flex;
width: 740px;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
}
.blue {
background-color: blue;
min-height: 25px;
width: 240px;
}
.green {
background-color: green;
min-height: 40px;
width: 490px;
}
.yellow {
background-color: yellow;
min-height: 90px;
width: 240px;
}
.orange {
background-color: orange;
width: 240px;
min-height: 30px;
}
.red {
background-color: red;
text-align: left;
vertical-align: top;
font-size: .8em;
float: left;
width: 240px;
}
.CadetBlue {
background-color: CadetBlue;
min-height: 40px;
width: 490px;
}
.GoldenRod {
background-color: GoldenRod;
width: 240px;
min-height: 30px;
}
.layoutAuto {
table-layout: auto;
}
.DataTableWithBorder {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
}
.blackback {
background-color: black;
}
HTML
<body style="width:740px;">
<div class="flexContainer">
<div class="red">
<h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular History</h3>
<span style="font-weight:bold; padding-top:5px;">headaches</span>
<br />
<h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Ocular Surgical History</h3>
<span style="font-weight:bold; padding-top:5px;">corneal</span>
<br /><span style="font-weight:bold; padding-top:5px;">injection(s) of</span>
<br /><span style="font-weight:bold; padding-top:5px;">lid procedure of·ectropion repair</span>
<br /><span style="font-weight:bold; padding-top:5px;">NLD probing</span>
<br />
<h3 style="color:#FFFFFF; font-size:11px; background-color:#383838; padding-left:8px; margin:10px 0px 1px 0px;">Vitals</h3>
<span style="font-weight:bold; padding-top:5px;">Temp: 98.8 Deg Fer</span>
<br /><span style="font-weight:bold; padding-top:5px;">Pulse: a 101 bpm</span>
<br /><span style="font-weight:bold; padding-top:5px;">Blood Pressure: Sys what? Dia what?</span>
<br /><span style="font-weight:bold; padding-top:5px;">Respiratory Rate: huh? bpm</span>
<br /><span style="font-weight:bold; padding-top:5px;">Weight: 199 Lizards</span>
<br /><span style="font-weight:bold; padding-top:5px;">Height: 515 Red Ants</span>
<br /><span style="font-weight:bold; padding-top:5px;">BMI: 21.18 egg</span>
<br /><span style="font-weight:bold; padding-top:5px;">Blood Glucose Level: bgl 233 vh</span>
<br />
</div>
<div class="green">
Section 1 - should NOT auto fill to bottom of Red column
</div>
<div class="yellow">
Section 2 - should move under section 1 and to the right of the red column
</div>
<div class="orange">
Section 3 - should move next to Section 2
</div>
<div class="blue">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Hertel</h3>
<strong>Base</strong> 91mm
<br /><strong>OD</strong> 18mm <strong>OS</strong> 23mm
</div>
<div class="GoldenRod">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Amsler Grid</h3>
<table>
<tr>
<td class="BoldText top">OS</td>
<td>
<table class="amslerTable layoutFixed">
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
<td> </td>
</tr>
</table>
</td>
<td class="BoldText top">OD</td>
<td>
<table class="amslerTable layoutFixed">
<tr>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="blackback"> </td>
</tr>
<tr>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
<td class="blackback"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="green">
sample data
</div>
<div class="orange">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Visual Acuity</h3>
<table class="stripedTable DataTableWithBorder layoutFixed">
<tr class="BoldText">
<td> </td>
<td>CC</td>
<td>SC</td>
<td>PH</td>
</tr>
<tr>
<td class="BoldText">OD</td>
<td>20/25</td>
<td>20/20</td>
<td>20/15</td>
</tr>
<tr>
<td class="BoldText">OS</td>
<td>20/25</td>
<td>20/20</td>
<td>20/15</td>
</tr>
<tr>
<td class="BoldText">OU</td>
<td>20/25</td>
<td>20/20</td>
<td> </td>
</tr>
</table>
<br />Test Used: Sn
</div>
<div class="blue">
blah blah blah
</div>
<div class="CadetBlue">
<h3 style="color:#FFFFFF; background-color:#383838; padding-left:8px; margin:10px 0px 0px 0px;">Auto Refraction</h3>
<strong>Age:</strong> 299 quarter days <strong>Purpose:</strong> justa type
<table class="">
<tr>
<td class="BoldText">OD</td>
<td>-1.50</td>
<td>+0.75</td>
<td>x 11</td>
<td>VaD 20/28/10</td>
<td>VaN 20/2</td>
</tr>
<tr>
<td class="BoldText">OS</td>
<td>-3.00</td>
<td>+1.00</td>
<td>x 154</td>
<td>VaD 20/48/13</td>
<td>VaN 20/2</td>
</tr>
</table>
</div>
</div>
</body>

Sticky td (headers) with rowspan

I would like to create rowspan on my sticky header but can't get it work.
JsFiddle: http://jsfiddle.net/x62v5ea8/1/
What i need is to connect first and second td in 'Header 1'
Can someone help me with this problem ?
HTML
<div class="my-wrapper">
<div class="my-scroller">
<table class="myTable">
<thead>
<tr>
<th class="my-sticky-col">Header 1</th>
<th class="my-sticky-col2">Header 2</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="my-sticky-col">A</td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="my-sticky-col"> </td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="my-sticky-col">C</td>
<td class="my-sticky-col2"> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
CSS
body {
font-size: 1em;
}
.myTable {
border: none;
border-right: solid 1px #DDEFEF;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.myTable thead th {
background-color: #EEE;
border: none;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.myTable tbody td {
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
white-space: nowrap;
}
.myTable tbody td, .myTable thead th {
border: 1px solid #ccc;
}
.my-wrapper {
position: relative;
}
.my-scroller {
margin-left: 283px;
overflow-x: scroll;
overflow-y: visible;
padding-bottom: 5px;
width: 300px;
}
.myTable .my-sticky-col {
left: 0;
position: absolute;
top: auto;
width: 120px;
}
.myTable .my-sticky-col2 {
border-right: solid 1px #000;
left: 142px;
position: absolute;
width: 120px;
}

Your code is actually working correctly. You are not seeing the rowspan working because the absolute positioning that is used for the sticky header. I updated your JS Fiddle with a few tweeks so you can see what is going on. http://jsfiddle.net/x62v5ea8/2/
You can see in the HTML I commented out the cell that will used by the rowspan and added a .test class with a height and background color so you can see that the cell is now fully expanding. Alternatively you can remove the position: absolute and you see the same results but your header wont be sticky anymore.

Scrollable table inside another table

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.

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/

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.

Table Thead Does not match up with TD Cells and Does not respect the table size

How can the code below be modified such that the Table THead matches up with the TD's and also respect the size (width) of the table? What is happening now is that the table headers expand beyond the size of the div and the table horizontally accross the page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-radius:3px;
border-collapse:collapse; border-spacing: 0;
box-shadow: 0 1px 2px #d1d1d1;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
table-layout: fixed;
}
table th {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #ededed;
}
table tr {
text-align: center;
}
table td {
border-bottom:1px solid #ccc;
border-left: 1px solid #ccc;
background: #fafafa;
text-align: left;
}
table tr:hover td {
background: #f2f2f2;
}
table th, table td {
height: 20px;
width: 200px;
}
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
}
table tr td:first-child, table tr th:first-child {
border-left: 0;
}
table thead {
_position: fixed;
_position: relative;
_position: absolute;
}
TABLE THEAD TR TH {
top:expression(this.offsetParent.scrollTop);
border-top:1px solid #ccc;
_position:relative;
_position: absolute;
_position: fixed;
}
table tr:first-child td {
border-top: 0;
}
</style>
</head>
<body>
<div id="container">
<table id="data">
<!-- Table Header -->
<thead>
<tr>
<th>File Number</th>
<th> </th>
<th> </th>
<th>Firstname</th>
<th>Lastname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>ABC-123-123456</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
<script>
$(function() {
$( "#data tr th" ).resizable({
handles: 'e'
});
});
</script>
</div>
</body>
</html>
ETA http://jsfiddle.net/KrB79/

Fix the container's CSS Coding to:
#container {
width : 98.7%;
height: 300px;
overflow-x: scroll;
overflow-y: scroll;
position: fixed;
}
Problem solved with IE7.