Need to put horizontal scroll bar for 4 cells alone in table using HTML

amuven · #1 August 30th, 2008, 01:09 PM

Hi All,

I need to put a horizontal scroll bar for 4 cells alone where my first cell in table should not contain any horizontal scroll bar .

In clear, let us say there are 5 columns in my table i want to put horizontal scroll bar only for 2nd,3rd,4th and 5th column alone where my 1st column should not horizontal scroll bar . so that I can scroll only last 4 columns .

Please some one provide me sample code as early as possible in doing this using HTML .

thanks,
Amuven

David Laakso · #2 August 30th, 2008, 05:14 PM

Quote:

Originally Posted by amuven

Please some one provide me sample code as early as possible in doing this using HTML .

Hmm-- sample code?, as early as possible?
Well, anyway...
Create two adjacent columns with a table in each, and set the right column to overflow-x: scroll; ?

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta name="generator" content=

"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>table</title>
 
<style type="text/css">

html, body {

margin : 0;

padding : 0;

}

body {

font : 100% serif;

text-align : center;

}
 
#one

    {border:1px solid red;overflow:hidden;

    float: left;

    width: 100px;

    }

#two

    {border:1px solid red;overflow:hidden;

    float: left;

    width: 660px;overflow-x: scroll;

    }

.c1 {width: 3000px;}

#wrapper

    {border:1px solid red;

    float: left;

    float/**/: none;

    }

/* easy clearing */

#wrapper:after

    {

    content: '.'; 

    display: block; 

    height: 0; 

    clear: both; 

    visibility: hidden;

    }

#wrapper

    {

    display: inline-block;

    }

/*\*/

#wrapper

    {

    display: block;

    }

/* end easy clearing */
 
</style>

</head>

<body>

<div id="wrapper">

<div id="one">

<table>

<tr>

<td>one</td>

</tr>

</table>

</div>

<div id="two">

<table class="c1">

<tr>

<td>two</td>

<td>three</td>

<td>four</td>

<td>five</td>

</tr>

</table>

</div>

</div>

</body>

</html>

What is Bytes?

Popular Articles