Forum Moderators: open
i have a problem about using rowspan in an absolute TR IN IE .
in IE it seems browser is ignoring all row spanned columns when you are using absolute position for their TR parent.
i need use absolute tr for static table header and footer because i wanna see table header and footer at the top and down of table when using scrolls .
here it is a sample code :
<!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>
<title></title>
</head>
<body style="margin: 0; padding: 0;">
<div>
<table cellspacing="1" cellpadding="2" border="1">
<thead>
<tr style="position: absolute; top: 0px; background-color: Gray;">
<td rowspan="2" align="center">
Count
</td>
<td colspan="3" align="center">
Section One
</td>
<td colspan="2" align="center">
Section Two
</td>
<td rowspan="2" align="center">
Money
</td>
</tr>
<tr style="position: absolute; top: 27px; background-color: Gray;">
<td width="120">
Country
</td>
<td>
Provance
</td>
<td>
City
</td>
<td width="130" align="center">
Hour
</td>
<td width="130">
Date
</td>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td colspan="7"> </td>
</tr>
<tr>
<td width="10">1</td><td width="120">Iran</td><td>Tehran</td><td>Tehran</td><td width="130" align="center">12:32</td><td width="130">Doshanbe 13 Farvardin 1387</td><td width="130">123.456.721</td>
</tr>
<tr>
<td width="10">2</td><td width="120">Iran</td><td>Tehran</td><td>Tehran</td><td width="130" align="center">12:32</td><td width="130">Doshanbe 13 Farvardin 1387</td><td width="130">123.456.721</td>
</tr>
<tr>
<td width="10">3</td><td width="120">Iran</td><td>Tehran</td><td>Tehran</td><td width="130" align="center">12:32</td><td width="130">Doshanbe 13 Farvardin 1387</td><td width="130">123.456.721</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
can any one please help me about this problem ?
thank you
I know of a solution published by Stu Nicholls. It uses fixed widths, but I never took the time to try to let the tables have more freedom on column width, nor played with colspan or rowspan in them.
But a more generic solution: I'd love to see one.
i dont know Stu Nicholls could you please give me his solution link ? thank you
thank you so much for your response .
Since the cells in the absolute positioned <tr> are simply collapsing, you need to give them their individual width again, colspan works when you do that.
But ... having to give these widths means you need to fix the width of the columns in the entire table, instead of letting it react to content.
In compliant browsers it's easy enough to get it working with colspan, rowspan and all (absolute positioning of the thead and tfoot works), but IE6 and 7 alike ignore positioning of the tfoot and thead, and while you can do it with the <tr> inside, that's not going to be handy if you have more than one <tr> in there.
Anyway, this is what I was playing with last, mostly based on some stuff I had laying around but gave up on as I couldn't find a solution to have the width fluid instead of fixed. There's some fixes for IE in there already, but it still triggers a peek-a-boo bug that I can't seem to fix all that quickly (I lost interest due to the fixed width issue ...)
<!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>
<title>untitled</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.scrolltable {
position: relative; /* to give position */
padding-top: 22px;
padding-bottom: 22px;
width: 210px;
}
.scrolltable table {
border-collapse:collapse;
}
.scrolltable div {
height: 100px;
overflow: auto;
}
.scrolltable td, .scrolltable th {
border: 1px solid black;
width: 60px;
height: 20px;
}
.scrolltable th[colspan="2"] {
width: 121px;
}
.scrolltable thead {
position: absolute;
top: 0;
left: 0;
height: 22px;
width: 184px;
overflow:hidden;
}
.scrolltable tfoot {
position: absolute;
bottom: 0;
left: 0;
height: 22px;
width: 184px;
overflow:hidden;
}
.scrolltable tfoot th{
width: 182px;
}
</style>
<!--[if IE 6]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js"
type="text/javascript"></script>
<![endif]-->
<!--[if lt IE 8]>
<style type="text/css">
.scrolltable tfoot tr{
position: absolute;
bottom: 0;
left: 0;
}
.scrolltable thead tr{
position: absolute;
top: 0;
left: 0;
}
</style>
<![endif]-->
</head>
<body>
<div class="scrolltable">
<div>
<table>
<thead>
<tr>
<th colspan="2">two columns</th>
<th>third</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">footer</th>
</tr>
</tfoot>
<tbody>
<tr><td>11</td><td>21</td><td>31</td></tr>
<tr><td>12</td><td>22</td><td>32</td></tr>
<tr><td>13</td><td>23</td><td>33</td></tr>
<tr><td>14</td><td>24</td><td>34</td></tr>
<tr><td>15</td><td>25</td><td>35</td></tr>
<tr><td>16</td><td>26</td><td>36</td></tr>
<tr><td>17</td><td>27</td><td>37</td></tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It's not a solution to all your problems, but I hope somebody might get inspired by it.
WebmasterWorld works mostly without links, so you'll have to google it. Take care: Stu Nicholl's code is copyrighted, and hence not allowed to be posted on WebmasterWorld.
