Jump to content

Static table row


killboy
 Share

Recommended Posts

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.

Edited by killboy
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by killboy
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...