He creado algunas tablas que muestran las transacciones con la última columna es la cantidad de campos. Necesito mostrar un total/subtotal justo debajo de esta columna. El problema es que mis columnas de la tabla se establece en % anchos.

Cómo puedo asegurarme de que el campo que muestra la cantidad total será inferior a la cantidad de columnas.

Creo que necesito algún tipo de código CSS para mantener el campo total(div/span) ligada a la anchura de la tabla, pero no estoy seguro de cómo hacer esto.

Gracias.

Ejemplo:

Col1 Col2 Col3 Amount
A      B    C    100
D      E    F    100
          Total: 200

EDIT: también me han dicho que esta tabla dinámica. Su creado mediante Visualforce (nativo force.com el lenguaje). La interfaz de usuario se muestra en HTML y tengo CSS para dar formato a la tabla HTML resultante. Ya que no tengo idea de antemano de la cantidad de filas que puedo tener, no puedo agregar una fila para los totales y quería ver si había una mejor solución.

está usted familiarizado con el colspan y rowspan atributos?
Un total o subtotal de todas las columnas en una tabla que sigue siendo parte de la tabla de datos, por lo que todavía pertenece dentro de la tabla.

OriginalEl autor Richard N | 2012-09-24

5 Comentarios

  1. 7

    CÓDIGO

    <!-- Style -->    
    <style>
       #total {
          text-align:right;
       }
    </style>    
    
    <!-- Table -->
    <table>
      <thead>
       <tr>
         <th>Col1</th>
         <th>Col2</th>
         <th>Col3</th>
         <th>Amount</th>
       </tr>
      </thead>
      <tbody>
       <tr>
         <td>A</td>
         <td>B</td>
         <td>C</td>
         <td>100</td>
       </tr>
       <tr>
         <td>D</td>
         <td>E</td>
         <td>F</td>
         <td>100</td>
       </tr>
      </tbody>
      <tfoot>
        <tr>
          <th id="total" colspan="2">Total :</th>
          <td>200</td>
        </tr>
       </tfoot>
     </table>

    El ‘Total’ de la etiqueta se encuentra en th que se extiende por 2 columnas (verificación de canela comentario). Un estilo que se aplica a esta celda se mueve todo el texto a la derecha. El número total (200) está alineado con los otros resultados.

    RESULTADO

    Usted tiene la idea correcta con el marcado, pero el tfoot debe contener 2: las células th (Total) y td (200).

    OriginalEl autor Stephan

  2. 3

    Usted puede intentar este

    CSS

    tbody tr{text-align:center; /*If you want to center align of row text*/}
    .right{text-align:right;}​

    HTML

    <table>
        <thead>
            <tr><th>Col1</th><th>Col2</th><th>Col3</th><th>Amount</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>A</td><td>B</td><td>C</td><td class="right">100</td>
            </tr>
            <tr>    
                <td>D</td><td>E</td><td>F</td><td class="right">100</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td class="right" colspan="3">Total:</td><td class="right">200</td>
            </tr>
        </tfoot>
    </table>

    DEMO.

    OriginalEl autor The Alpha

  3. 0

    Uso colspan para su ‘total’ de la etiqueta:

    <table border="1>"
        <tr>
            <th width="25%">Col1</th>
            <th width="25%">Col2</th>
            <th width="25%">Col3</th>
            <th width="25%">Amount</th>
        </tr>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>C</td>
            <td>100</td>
        </tr>
        <tr>
            <td colspan="3" style="text-align:right;">total:</td>
            <td>100</td>
        </tr>
    </table>
    Estilos (ancho, text-align) siempre debe estar fuera de la estructura de la tabla.
    Por supuesto, esto era sólo una rápida respuesta a la pregunta.

    OriginalEl autor Alan Shortis

  4. 0

    Agregar el colspan atributo a su última td y alinear el texto a la derecha.

    HTML

    <tr>
        <td class="total-column" colspan="4">
        Total:200
        </td>
    </tr>

    CSS

    .total-column {
        text-align:right;
    }

    OriginalEl autor Jrod

Dejar respuesta

Please enter your comment!
Please enter your name here