Is there any way to find the overflow in CSS?
I have two table using two different style.
1. Header text
2.Data
I have scenario where size of table which has data may increase or decrease based upon resultset.
I am using "overflow:auto",so that vertical bar will appear when data is huge in table,so that user can see all the records.
This creates a problem in alignment of header and databody when there is no scroll bar.As width of databody moves with a little (width=scrollbar) to the right and mismatch with the header
If scrollbar appears alignement is OK between header and content as scrollbar appears sidewise with content.
Try running the exmple mentioned below for both option
1.Without scrollbar
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
div.head
{
background-color: #FFFFCC;
border: 1px solid #000000;
position: absolute;
height: 25px;
width: 385px;
left: 50px;
top: 22px;
}
div.scroll {
background-color: #FFFFCC;
border: 1px solid #000000;
overflow-y: auto;
position: absolute;
height: 100px;
width: 400px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="head">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
</table>
</table>
</div>
<div class="scroll">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
</div>
</body>
</html>
2. With Scroll bar
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
div.head
{
background-color: #FFFFCC;
border: 1px solid #000000;
position: absolute;
height: 25px;
width: 385px;
left: 50px;
top: 22px;
}
div.scroll {
background-color: #FFFFCC;
border: 1px solid #000000;
overflow-y: auto;
position: absolute;
height: 100px;
width: 400px;
left: 50px;
top: 50px;
}
</style>
</head>
<body>
<div class="head">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td>Header1</td>
<td>Header2</td>
</tr>
</table>
</table>
</div>
<div class="scroll">
<table width="100%" border="1" cellspacing="0" cellpadding="2">
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
<tr>
<td>content</td>
<td>content</td>
</tr>
</table>
</div>
</body>
</html>
How can I rectify the same any suggestion.
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
