Static table row

[killboy]

Hi there. First of all, happy new year to everybody!I have a table inside a div which is scrolled. I need the first row to be static and scrolled along with the div. Maybe you'll understand what I mean by looking at my code:

<div id="div-detalle" style="width: 780px; height: 200px; overflow: auto;">        <table width="100%" border="1" cellpadding="5" id="table-detalle">            <tr class="titulo-tabla" align="center">                <th>                                     </th>                <th>                    Categoría                </th>                <th>                    Nombre                </th>                <th>                    Marca                </th>                <th>                    Cantidad                </th>                <th>                    Valor Unitario                </th>                <th>                    Tarifa                </th>                <th>                    Total                </th>            </tr>            <tr id="detalle-1">                <td>                    <a href="java script:;" id="eliminar-detalle">                        <img src="img/eliminar.png" alt="Eliminar" border="0"></a>                </td>                <td>                    <select name="categoria[]">                        <?php                        foreach ( $this->categorias AS $categoria )                        {                            ?>                            <option value="<?php echo $categoria["id"]; ?>">                                <?php echo $categoria["descripcion"]; ?>                            </option>                            <?php                        }                        ?>                    </select>                </td>                <td>                    <input type="text" id="nombre" name="nombre[]">                </td>                <td>                    <input type="text" id="marca" name="marca[]">                </td>                <td>                    <input type="text" id="cantidad" name="cantidad[]">                </td>                <td>                    <input type="text" id="valor_unitario" name="valor_unitario[]">                </td>                <td>                    <input type="text" id="tarifa" name="tarifa[]">                </td>                <td>                    <input type="hidden" id="subtotal" name="subtotal[]">                    <input type="text" disabled="disabled" id="subtotal-disabled">                </td>            </tr>            <tr>                <td colspan="8">                                     </td>            </tr>            <tr>                <td colspan="6">                                     </td>                <td align="center">                    <b>Total</b>                </td>                <td>                    <input type="text" id="total" name="total" disabled="disabled">                </td>            </tr>        </table>    </div>

The reason is, I will be adding new "detalle" rows by pressing a button, so I need the first row to be static so the user know what column is related an input.Thanks for the help.

[Synook]

Why don't you just move the non-scrolling row to another table outside the division?

[killboy]

Why don't you just move the non-scrolling row to another table outside the division?

I did, and that works when scrolling vertically, but how can I make the outside row scroll horizontally the same time as the div?

[ShadowMage]

This works ok. The only problem with tables that require horizontal scrolling in addition to vertical scrolling is that the table's scrollbar is not visible when the div is scrolled all the way to the left.I can't remember where I got this code from, but here it is:HTML:

<div class='scrollTblContainer'>   <table>	  <thead class='colHdrs'>		 <tr>			<th>Column1</th>...		 </tr>	  </thead>	  <tbody class='data'>		 <tr>			<td>Info1</td>...		 </tr>		 ...	  </tbody>   </table></div>

CSS:

div.scrollTblContainer {	/*Specify a height and width; add ~16px to width for scrollbar*/	overflow: auto;}thead.colHdrs tr {	display: block;}tbody.data {	display: block;	/*Specify height; make it slightly smaller than the scrollTblContainer height*/	overflow: auto;}

The only other downside to this is that you'll have to give every column a defined width or the headers won't line up with the data.

[killboy]

OK, I googled around and found how to do it with jQuery. This is my code and it's working as I want:

<script type="text/javascript">       $( document ).ready( function() {            $( "#div-detalle" ).scroll( function() {                    $( "#fila-informacion-detalle" ).scrollLeft( $( "#div-detalle" ).scrollLeft() );                }            );      });</script><div id="fila-informacion-detalle" style="width: 770px; overflow: hidden;">        <table border="1" cellpadding="5" style="width: 1284px;">            <tr class="titulo-tabla" align="center">                <th width="16">                                     </th>                <th width="81">                    Categoría                </th>                <th width="183">                    Nombre / Referencia *                </th>                <th width="183">                    Marca *                </th>                <th width="183">                    Cantidad *                </th>                <th width="183">                    Valor Unitario *                </th>                <th width="183">                    Tarifa *                </th>                <th width="183">                    Total                </th>            </tr>        </table>    </div>    <div id="div-detalle" style="width: 770px; height: 200px; overflow: auto;">        <table border="1" cellpadding="5" id="table-detalle">            <?php            $countDetalle = 1;                        if ( empty( $this->orden ) === false )            {                $countDetalle = count( $this->orden["detalle"] );            }            for ( $i = 0; $i < $countDetalle; $i++ )            {                ?>                <tr id="detalle-<?php echo $i; ?>">                    <td>                        <a href="java script:;" id="eliminar-detalle">                            <img src="img/eliminar.png" alt="Eliminar" border="0"></a>                    </td>                    <td>                        <select name="detalle[id_categoria][]" style="width: 81px;">                            <?php                            $selected = null;                            foreach ( $this->categorias AS $categoria )                            {                                if ( $categoria["id"] === $this->orden["detalle"][$i]["id_categoria"] )                                {                                    $selected = "selected=\"selected\"";                                }                                ?>                                <option value="<?php echo $categoria["id"]; ?>" <?php echo $selected; ?>>                                    <?php echo $categoria["descripcion"]; ?>                                </option>                                <?php                                $selected = null;                            }                            ?>                        </select>                    </td>                    <td>                        <input type="text" id="nombre" name="detalle[nombre][]"                               value="<?php echo $this->orden["detalle"][$i]["nombre"]; ?>">                    </td>                    <td>                        <input type="text" id="marca" name="detalle[marca][]"                               value="<?php echo $this->orden["detalle"][$i]["marca"]; ?>">                    </td>                    <td>                        <input type="text" id="cantidad" name="detalle[cantidad][]"                               value="<?php echo $this->orden["detalle"][$i]["cantidad"]; ?>">                    </td>                    <td>                        <input type="text" id="valor_unitario" name="detalle[valor_unitario][]"                               value="<?php echo $this->orden["detalle"][$i]["valor_unitario"]; ?>">                    </td>                    <td>                        <input type="text" id="tarifa" name="detalle[tarifa][]"                               value="<?php echo $this->orden["detalle"][$i]["tarifa"]; ?>">                    </td>                    <td>                        <input type="hidden" id="subtotal" name="detalle[subtotal][]"                               value="<?php echo implode( "", explode( ",", $this->orden["detalle"][$i]["subtotal"] ) ); ?>">                        <input type="text" disabled="disabled" id="subtotal-disabled"                               value="<?php echo $this->orden["detalle"][$i]["subtotal"]; ?>">                    </td>                </tr>                <?php            }            ?>                            <tr>                <td colspan="8">                                     </td>            </tr>            <tr>                <td colspan="6">                                     </td>                <td align="center">                    <b>Total</b>                </td>                <td>                    <input type="text" id="total" name="total" disabled="disabled"                           value="<?php echo $this->orden["encabezado"]["total"]; ?>">                </td>            </tr>        </table>    </div>

As ShadowMage said, I had to give every column a defined width, but that's okay.ShadowMage, I've not tried your code, but thanks for the help.