div - title html css

¿Cómo obtener celdas de la mesa espaciadas uniformemente?

Question

Estoy tratando de crear una página con una serie de tablas html estáticas en ellas.

¿Qué debo hacer para que muestren cada columna del mismo tamaño que las demás columnas de la tabla?

El HTML es el siguiente:

<span class="Emphasis">Interest rates</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
    <tr><th class="TableHeader"></th><th class="TableHeader">Current rate as at 31 March 2010</th><th class="TableHeader">31 December 2009</th><th class="TableHeader">31 March 2009</th></tr>
    <tr class="TableRow"><td>Index1</td><td class="PerformanceCell">1.00%</td><td>1.00%</td><td>1.50%</td></tr>
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">0.50%</td><td>0.50%</td><td>0.50%</td></tr>
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">0.25%</td><td>0.25%</td><td>0.25%</td></tr>
</table>
<span>Source: Bt</span><br /><br />

<span class="Emphasis">Stock markets</span><br />
<table cellpadding="0px" cellspacing="0px" class="PerformanceTable">
    <tr><th class="TableHeader"></th><th class="TableHeader">As at 31 March 2010</th><th class="TableHeader">1 month change</th><th class="TableHeader">QTD change</th><th class="TableHeader">12 months change</th></tr>
    <tr class="TableRow"><td>index1</td><td class="PerformanceCell">1169.43</td><td class="PerformanceCell">5.88%</td><td class="PerformanceCell">4.87%</td><td class="PerformanceCell">46.57%</td></tr>
    <tr class="TableRow"><td>index2</td><td class="PerformanceCell">1958.34</td><td class="PerformanceCell">7.68%</td><td class="PerformanceCell">5.27%</td><td class="PerformanceCell">58.31%</td></tr>
    <tr class="TableRow"><td>index3</td><td class="PerformanceCell">5679.64</td><td class="PerformanceCell">6.07%</td><td class="PerformanceCell">4.93%</td><td class="PerformanceCell">44.66%</td></tr>
    <tr class="TableRow"><td>index4</td><td class="PerformanceCell">2943.92</td><td class="PerformanceCell">8.30%</td><td class="PerformanceCell">-0.98%</td><td class="PerformanceCell">44.52%</td></tr>
    <tr class="TableRow"><td>index5</td><td class="PerformanceCell">978.81</td><td class="PerformanceCell">9.47%</td><td class="PerformanceCell">7.85%</td><td class="PerformanceCell">26.52%</td></tr>
    <tr class="TableRow"><td>index6</td><td class="PerformanceCell">3177.77</td><td class="PerformanceCell">10.58%</td><td class="PerformanceCell">6.82%</td><td class="PerformanceCell">44.84%</td></tr>
</table>
<span>Source: B</span><br /><br />

También estoy abierto a sugerencias sobre cómo arreglar esto, si hay alguna. :-)

edición: debo añadir que los atributos de cellpadding y cellspacing son requeridos por una aplicación de conversión de PDF de terceros que usamos

Answer 1

También estoy abierto a sugerencias sobre cómo arreglar esto, si hay alguna. :-)

Bueno, no podrías usar el elemento span , por razones semánticas. Y no tienes que definir la clase PerformanceCell . Se puede acceder a las celdas y filas usando PerformanceTable tr {} y PerformanceTable tr {} , respectivamente.

Para la parte de espaciado, tengo el mismo problema varias veces. Admito vergonzosamente que evité el problema, así que también tengo mucha curiosidad por cualquier respuesta.

Answer 2

En tu archivo CSS:

.TableHeader { width: 100px; }

Esto establecerá todas las etiquetas td debajo de cada encabezado a 100px. También puede agregar una definición de ancho (en el marcado) a cada etiqueta th individual, pero la solución anterior sería más fácil.

Answer 3

Estaba diseñando un correo html y tuve un problema similar. Pero tener cada celda con el ancho fijo no es lo que quiero. Me gustaría tener el mismo espaciado entre los contenidos de las columnas, como el siguiente

| --- algo --- | --- una cosa muy larga --- | --- short --- |

Después de mucho ensayo y error, se me ocurrió lo siguiente:

<style>
    .content {padding: 0 20px;}
</style>

table width="400"
    tr
        td
            a.content something
        td 
            a.content a very long thing
        td 
            a.content short

Cuestiones de interés:

1. Outlook 2007/2010/2013 no admite el relleno. Tener el ancho del conjunto de tablas permitirá que los anchos de las columnas se establezcan automáticamente. De esta manera, aunque los contenidos no tendrán el mismo espacio. Ellos al menos tienen algún espacio entre ellos.

2. La configuración automática del ancho para las columnas de la tabla no proporcionará un espaciado igual entre los contenidos. El relleno agregado para los contenidos forzará el espaciado igual.

Answer 4

Puedes usar CSS. Una forma es configurar table-layout de la tabla como fixed , lo que impide que la tabla y los niños cambien de tamaño según su contenido. A continuación, puede establecer un ancho fijo en los elementos td relevantes. Esto debería funcionar:

table.PerformanceTable {
    table-layout: fixed;
    width: 500px;
}
    table.PerformanceTable td.PerformanceCell {
        width: 75px;
    }

¿Sugerencias para poner en orden? No necesita los cellpadding o cellspacing , o las clases TableRow y TableHeader . Puedes cubrirlos en CSS:

table {
    /* cellspacing */
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    /* This covers the th elements */
}
tr {
    /* This covers the tr elements */
}
th, td {
    /* cellpadding */
    padding: 0;
}

Debe usar un encabezado (por ejemplo, <h2> ) en lugar de <span class="Emphasis"> y una <p> o una tabla <caption> lugar de la Fuente <span> . Tampoco necesitarías los elementos originales, porque estarías utilizando elementos de nivel de bloque adecuados.

Answer 5

Si desea que todas sus columnas tengan un tamaño fijo, podría usar CSS:

td.PerformanceCell
{
    width: 100px;
}

O mejor, usa th.TableHeader (no lo noté la primera vez).

Answer 6

Siempre se puede establecer el ancho de cada td en 100% / N columnas.

<td width="x%"></td>

Answer 7

Tome el ancho de la tabla y divídalo por el número de celdas ().

PerformanceTable {width:500px;}    
PerformanceTable.td {width:100px;}

Si la tabla se ensancha o se reduce dinámicamente, podría aumentar dinámicamente el tamaño de celda con un poco de javascript.