0

Tengo el siguiente problema con el cual necesito ayuda, pues no soy tan experimentado usando datatables en Django.

Cuando genero la siguiente tabla con datatables queda de la siguiente forma:

introducir la descripción de la imagen aquí

El problema es que la Bala 2 es una segunda tabla que genero mediante un ciclo anidado donde existen 2 Balas (pueden existir más), pero necesito que la segunda tabla aparezca al lado de la primera (de forma horizontal, no vertical). Además, cuando intento generar el excel, este me coge los datos de la primera tabla y no de la segunda.

Agradecería encarecidamente que me ayudaran ya que llevo varios días intentando y no logro avanzar en el proyecto!

Adjunto el código:

        {% for x in Bala %} 
            <div>
                <table class="table-sm" id="data">
                    <thead>
                        <tr>
                            <th style="width: 50px;"></th> 
                            <th style="width: 80px;"></th> 
                            <th style="width: 80px;">{{ x.1 }}</th>
                            <th style="width: 80px;"></th> 
                            <th style="width: 80px;"></th>          
                        </tr>                     
                    </thead>
                    <tbody >
                        <tr>
                            <th>Dia</th> 
                            <th>Porciento</th> 
                            <th>Litros</th>
                            <th>Gasto</th> 
                            <th>Entrada</th>            
                        </tr>
                        {% for c in x %}                      
                            <tr>
                                <td>{{ c.fecha | date:"d" }}</td>
                                <td>{{ c.porciento }}</td>
                                <td>{{ c.litros }}</td>
                                <td>{{ c.gasto }}</td>
                                <td>{{ c.entrada }}</td>      
                            </tr> 
                        {% endfor %}
                    </tbody>
                </table>
            </div>                
        {% endfor %} 

1 respuesta 1

0

Tu problema se resuelve mostrando las tablas una al lado de la otra. Para esto podemos usar css. Hay varias formas de resolver esto, una es usando inline-block. Tu código fuente prácticamente no cambia.

    <div class="contenedor">
    {% for x in Bala %} 
        <div class="contenido">
            <table class="table-sm" id="data">
                <thead>
                    <tr>
                        <th style="width: 50px;"></th> 
                        <th style="width: 80px;"></th> 
                        <th style="width: 80px;">{{ x.1 }}</th>
                        <th style="width: 80px;"></th> 
                        <th style="width: 80px;"></th>          
                    </tr>                     
                </thead>
                <tbody >
                    <tr>
                        <th>Dia</th> 
                        <th>Porciento</th> 
                        <th>Litros</th>
                        <th>Gasto</th> 
                        <th>Entrada</th>            
                    </tr>
                    {% for c in x %}                      
                        <tr>
                            <td>{{ c.fecha | date:"d" }}</td>
                            <td>{{ c.porciento }}</td>
                            <td>{{ c.litros }}</td>
                            <td>{{ c.gasto }}</td>
                            <td>{{ c.entrada }}</td>      
                        </tr> 
                    {% endfor %}
                </tbody>
            </table>
        </div>                
    {% endfor %}
    </div>

Agregué un div, que engloba al for, con un nuevo estilo contenedor. A su vez el div dentro del for ahora tiene un estilo contenido, el cual tendrá el inline-block antes mencionado.

Los dos nuevos estilos son:

.contenedor {
  border: 1px solid black;
  margin: 1rem;
  padding: 2rem 2rem;
  text-align: center;
}
.contenido {
  display: inline-block;
  border: 1px solid red;
  padding: 1rem 1rem;
  vertical-align: middle;
}

El estilo contenido, en su propiedad display tiene el valor inline-block que muestra las tablas lado a lado. Los border son para ver qué abarca cada div y pueden eliminarse (especialmente el borde rojo). Hay otras formas de resolver este problema con css, te recomiendo la lectura del siguiente artículo

2
  • Muy Buenas y gracias por su respuesta! la verdad es que si se pone la 2da tabla como quiero mediante su respuesta, sin embargo continua quedándose fuera la 2da tabla cuando genero el archivo en excel. Commented el 9 mar. 2023 a las 13:19
  • Ahí ya no te puedo ayudar. Tendrías que hacer otra pregunta pidiendo ayuda con la exportación a excel, donde conste cuál es la librería y procedimiento que ponés en práctica para exportar. Si la respuesta te ayudó con respecto a las tablas marcala como aceptada, como una forma de indicarle a otros usuarios que esta es la forma de resolver el problema planteado. Commented el 9 mar. 2023 a las 13:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.