Tengo que crear una tabla con 5 columnas. El ancho de la tabla es variable (50% de contenido de anchura). Algunas de las columnas contienen fija el tamaño de los botones, por lo que las columnas deben tener un fijo, digamos 100px. Algunas de las columnas de texto en ellos, por lo que desea que las columnas a las variables anchos de columna.

Por ejemplo:

Column1: 20% de (tablewidth – suma(fixedwidth_columns))’

2: 100px

Columna3: el 40% de los (tablewidth – suma(fixedwidth_columns))

Column4: 200px

Column5: el 40% de los (tablewidth – suma(fixedwidth_columns))

¿Cuál es la mejor manera de lograr esto?

Simplemente un conjunto de width atributo relevante <td> elementos?
Uhm, no, no funciona de esa manera. Un ancho porcentaje se toma el porcentaje del total de la anchura de la tabla, no el ancho de la tabla – fixedcolumns.
JSFiddle: jsfiddle.net/M4Et8
Mira esto: stackoverflow.com/questions/7882979/…

OriginalEl autor Basaa | 2014-02-08

2 Comentarios

  1. 32

    Se podría establecer la table-layout: fijo para la table elemento, entonces simplemente establece width atributo relevante <td> o <th> elementos:

    table {
        table-layout: fixed;
    }

    JSFiddle Demo.

    De la MDN:

    La table-layout propiedad CSS define el algoritmo que se utiliza para
    diseño de las celdas de la tabla, filas y columnas.

    Valores:

    fijo:

    La tabla y los anchos de columna son establecidos por el ancho de table y col elementos o por el ancho de la primera fila de celdas. Las células en las filas subsiguientes no afectan a los anchos de columna.

    Esta es la razón por la que amo tanto. Gracias mucho.
    A mí también 🙂 eres muy bienvenida.
    Gran respuesta. Lástima que Microsoft Outlook no entiende de tabla de diseño… 🙁 +1 no obstante

    OriginalEl autor Hashem Qolami

  2. 6

    a ancho fijo en una tabla, usted necesita el table-layout inmueble establecido para fixed;
    Desde que mezclar % y px , no va a ser coherente .

    Puede establecer sólo el px de ancho y, finalmente, un pequeño valor de % y dejar a la otra columna para el uso de ancho de izquierda a disposición.
    ejemplo : http://jsfiddle.net/M4Et8/2/

    <table style='table-layout:fixed;width:100%' border='1'>
        <tr>
            <th style='width: 20%;'>Column1</th>
            <th style='width: 100px;'>Column2</th>
            <th >Column3</th>
            <th style='width: 200px;'>Column4</th>
            <th >Column5</th>
        </tr>
    </table>
    Sólo un poco demasiado tarde, pero gracias por tu esfuerzo, se agradece mucho.

    OriginalEl autor G-Cyr

Dejar respuesta

Please enter your comment!
Please enter your name here