tableau en partie fixe - Forum HTML / CSS / XHTML

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  HTML / CSS / XHTML (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  tableau en partie fixe

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: tableau en partie fixe (Lu 1356 fois)

tableau en partie fixe
« sur: le 06-04-2014 a 22:56:13 »

Bluely
Membre récent

Hors-Ligne

Sexe: Femelle

Messages: 56

Hello à tous,

Je viens demander votre aide. Je voudrais faire un tableau en partie fixe sur le coté gauche.
Dans ma structure donc, j'ai une div conteneur dans laquelle il y a 2 tables cote à cote.
Je voudrais que la premiere table soit toujours visible et que la seconde qui a beaucoup de cellule ait une scrollbar. Je n'y arrive vraiment pas.
Pouvez-vous m'aider svp?
Merci

Voici mon code

Code:
<div id="wrapper">

<table class="tab1">
<tr >
<td>Titre </td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>Titre </td>
<td>text</td>
<td>text</td>
</tr>
<tr >
<td>Titre </td>
<td>text</td>
<td>text</td>
</tr>

</table>

<table class="tab2">
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>

<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>

<tr>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>

</table>

</div>

Code:

#wrapper {
font-weight: bold;
height: 90px;
min-width: 100%;
overflow: auto;
width: 100%;
position:relative;
}

#wrapper .tab1 {

overflow: hidden;
width: 360px;
left:0;
position: absolute;
background:red;
}

#wrapper .tab2 {
overflow: auto;
width: 1507px;
left: 360px;
position: relative;
background:green;
}

#wrapper .tab2 td{
padding: 0 30px;
}