Pregunta Hacer mostrar el ancho de porcentaje de uso de celdas de tabla


Violín

Tengo esta sensación de mesa, usando una lista desordenada. Pero no puedo imaginar cómo hacer que las celdas de la tabla tengan un 50% de ancho (quiero que cada fila tenga un ancho del 100%). La razón por la que estoy usando display: table-row; y display: table-cell; es para poder alinear verticalmente los datos si el texto del parámetro es más de una línea. No quiero usar un valor de pixel o em real para el ancho, porque, bueno, solo lo quiero en porcentaje si es posible. Preferiría renunciar a la alineación vertical. Por favor, no javascript ¡Gracias!

HTML:

<div class="group group2">
    <h2>Health Indicies</h2>
    <ul>
        <li><p class="parameter">GGP</p><p class="data">265</p></li>
        <li><p class="parameter">Comfort</p><p class="data">blah</p></li>
        <li><p class="parameter">Energy</p><p class="data">gooo</p></li>
    </ul>
</div>

CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.group {
    width: 50%;
    margin-bottom: 20px;
    outline: 1px solid black;
    background: white;
    box-shadow: 1px 1px 5px 0px gray;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.group h2 {
    display: block;
    font-size: 14px;
    background: gray;
    text-align: center;
    padding: 5px;
}
.group li {
    clear: both;
}
.group p {
    padding: 3%;
    text-align: center;
    font-size: 14px;
}
.group2 li {
    display: table-row;
}
.group2 p {
    display: table-cell;
    vertical-align: middle;
    width: 46%;
    border-bottom: 2px solid gray;
}
.group li:last-child p {
    border-bottom: 0;
}

32
2018-03-12 22:05


origen


Respuestas:


Ya casi estás ahí. Solo necesitas agregar display: table y width: 100% para usted ul.group2. Probablemente también podría salirse con la suya sin proporcionar un width en tu .group2 p elementos.

Esto debería funcionar: http://jsfiddle.net/6Kn88/2/


43
2018-03-12 22:11



Selecciona el ul a display: table de acuerdo con el resto de su CSS, y darle un ancho del 100% para completar el div principal. Ahora sus anchos deben tomarse para sus "filas" y "celdas".

Editar: según kpeatt, arriba, ¡quién fue más rápido de lo normal!


9
2018-03-12 22:11



Encontré la mejor manera de configurar el div de tabla-célula con un ancho del 100% del código fuente de arranque.

Conjunto width:10000px, se procesó como 100% de ancho.

https://jsfiddle.net/y3qsxb9m/


0
2018-01-13 09:51



por

display: table-cell;  

ajuste

width:10000px; 

actuado como

width:100%; 

Entonces, si quieres un 50% de ancho solo usa

width: 5000px;

-7
2018-04-13 21:24