Hello,

I'm french so, sorry for my sentence mistakes...

I have a <table> without headers. And on his top, I have a <div> which contains other <div>. These <div> represent the header of the table. I'm doing it in order to header follow the table when I use a scrollbar and jQuery plugin doesn't works.

I wish to have this :

http://sdz-upload.s3.amazonaws.com/p...mandeTab01.png



So, this is the top part which is composed by <div>. In HTML :

Code:
<div id="blocsHeadersG">
                    <div id="blocHeadersG1">
                        <div id="blocHeadersTabG_CheckBox" class="tabG_checkB">
                        </div>
                        <div id="blocHeadersTabG_Commence"  class="tabG_commence">
                            <img id="imgTitreTabG_Commence" src="Images/ptInfo.gif" />
                        </div>
                        <div id="blocHeadersTabG_NumOF" class="tabG_numOF">
                            <a id="lnkbtnTabG_TitreNumOF" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreNumOF&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=cod_wo&amp;order=desc&quot;, false, true))" style="color:Black;">Num OF</a>
                        </div>
                        <div id="blocHeadersTabG_SeqOF" class="tabG_seqOF">
                            <a id="lnkbtnTabG_TitreSeqOF" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreSeqOF&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=dat_sequence&amp;order=desc&quot;, false, true))" style="color:Black;">Seq OF</a>
                        </div>
                        <div id="blocHeadersTabG_Art" class="tabG_art">
                             <a id="lnkbtnTabG_TitreArt" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreArt&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=article&amp;order=desc&quot;, false, true))" style="color:Black;">Article</a>
                        </div>
                        <div id="blocHeadersTabG_QteP" class="tabG_qtePrevue">
                            <a id="lnkbtnTabG_TitreQtePrevue" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreQtePrevue&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=wo_qty&amp;order=desc&quot;, false, true))" style="color:Black;">Qt prvue</a>
                        </div>
                        <div id="blocHeadersTabG_QteR" class="tabG_qteRevue">
                            <a id="lnkbtnTabG_TitreQteRevue" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreQteRevue&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=qty_revue&amp;order=desc&quot;, false, true))" style="color:Black;">Qt revue</a>
                        </div>
                        <div id="blocHeadersTabG_Comp" class="tabG_composant">
                            <a id="lnkbtnTabG_TitreComp" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreComp&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=composant&amp;order=desc&quot;, false, true))" style="color:Black;">Composant</a>
                        </div>
                        <div id="blocHeadersTabG_Restant" class="tabG_restant">
                            <a id="lnkbtnTabG_TitreRestant" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;lnkbtnTabG_TitreRestant&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Test.aspx?nomColG=restant_a_assigner&amp;order=desc&quot;, false, true))" style="color:Black;">Restant  assigner</a>
                        </div>
                    </div>

                    <div id="blocHeadersG2">
                        <div id="blocHeadersTabG_AssHU">
                            <span id="lbTabG_TitreAssignHU">Assignation HU</span>
                        </div>
                        <div id="blocHeadersTabG_QteT" class="tabG_qteTotale">
                            <span id="lbTabG_TitreQteTotale">Qt totale</span>
                        </div>
                        <div id="blocHeadersTabG_NumHU" class="tabG_numHU">
                            <span id="lbTabG_TitreNumHU">N HU</span>
                        </div>
                        <div id="blocHeadersTabG_QteHU" class="tabG_qteHU">
                            <span id="lbTabG_TitreQte">Quantit</span>
                        </div>
                    </div>

                </div>
We can see that each <div> have a class.

Then, I have a <table> where each line is coding like this in HTML :

Code:
<tr>
	<td id="tabG_tdCb1003212" class="tabG_checkB donneesOF 1003212" value="n" rowspan="1">
		<span select="n">
			<input id="cb1003212" type="checkbox" name="cb1003212" />
		</span>
	</td>
	<td class="tabG_commence donneesOF 1003212 ">
		<img src="Images/commence10.gif" />
	</td>
	<td id="1003212" class="tabG_numOF donneesOF 1003212 1003212" value="1003212" rowspan="1">1003212
	</td>
	<td id="seqOF1003212" class="tabG_seqOF donneesOF 1003212" value="10/04 20:03" rowspan="1">10/04 20:03
	</td>
	<td id="art1003212" class="tabG_art donneesOF 1003212" value="X" rowspan="1">XXX
	</td>
	<td id="qteP1003212" class="tabG_qtePrevue donneesOF 1003212" value="150" select="n" rowspan="1">150
	</td>
	<td id="qteR1003212" class="tabG_qteRevue donneesOF 1003212" value="150" select="n" rowspan="1">150
	</td>
	<td id="comp1003212" class="tabG_composant donneesOF 1003212" rowspan="1">YYY
	</td>
	<td id="restant1003212" class="tabG_restant donneesOF 1003212" value="-2,60" select="n" rowspan="1">-2,60
	</td>
	<td id="qteT1003212_1" class="tabG_qteTotale donneesOF 1003212" value="0" select="n">0
	</td>
	<td id="numHU1003212_1" class="tabG_numHU donneesOF 1003212 640055936" value="640055936">640055936
	</td>
	<td id="qteHU1003212_1" class="tabG_qteHU donneesOF 1003212" value="0" select="n">0
	</td>
</tr>
You can see that each cells have an attribut class which correspond to "headers" div's class.

My issue is to have a nice appearance for each screen resolution. For sample, my first image is the result for a screen with 1280*800 resolution. But if I launch my web application on a screen with 1366 * 768. It give it :

http://sdz-upload.s3.amazonaws.com/prod/upload/demandeTab04.png



My CSS is the next :


Code:
#blocHeadersG1{
    width : 487px;
    float : left;
    height : 100%;
    overflow-wrap :break-word;
    text-align : center;
}

#blocHeadersG2{
    width : 115px;
    float : left;
    height : 100%;
    overflow-wrap :break-word;
    text-align : center;
}

/* --- --- --- Headers Gauches --- --- --- */
/* --- --- CHeckBox --- --- */
#blocHeadersTabG_CheckBox {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
}

.tabG_checkB {
    width : 22px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Commence --- --- */
#blocHeadersTabG_Commence {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 5px;
}

.tabG_commence {
    width : 32px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Numero OF --- --- */
#blocHeadersTabG_NumOF {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 10px;
}

.tabG_numOF {
    width : 37px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Sequence OF --- --- */
#blocHeadersTabG_SeqOF {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 10px;
}

.tabG_seqOF {
    width : 28px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Article --- --- */
#blocHeadersTabG_Art {

    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 10px;
}

.tabG_art {
    width : 140px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Qte prevue --- --- */
#blocHeadersTabG_QteP {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 10px;
}

.tabG_qtePrevue {
    width : 35px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Qte revue --- --- */
#blocHeadersTabG_QteR {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 10px;
}

.tabG_qteRevue {
    width : 35px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Composant --- --- */
#blocHeadersTabG_Comp {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
    padding-top : 10px;
}

.tabG_composant {
    width : 125px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Restant --- --- */
#blocHeadersTabG_Restant {
    height : 100%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
}

.tabG_restant {
    width : 22px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Assignation HU --- --- */
#blocHeadersTabG_AssHU {
    width : 114px;
    height : 45%;
    overflow : hidden;
    float : left;
    border-bottom : 1px solid black;
    border-right : 1px solid black;
    padding-top : 2px;
}
/* --- --- Qte totale --- --- */
#blocHeadersTabG_QteT {
    height : 54%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
}

.tabG_qteTotale {
    width : 35px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Numero HU --- --- */
#blocHeadersTabG_NumHU {
    height : 54%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
}

.tabG_numHU {
    width : 47px;
    padding-left : 0;
    padding-right : 0;
}
/* --- --- Qte HU --- --- */
#blocHeadersTabG_QteHU {
    height : 54%;
    overflow : hidden;
    float : left;
    border-right : 1px solid black;
}

.tabG_qteHU {
    width : 30px;
    padding-left : 0;
    padding-right : 0;
}
I have this problem since 3days and I hope that you can help me

Thanks