Diseñando la última td en una tabla con css

Question

Quiero dar estilo al último TD en una tabla sin usar una clase CSS en el TD en particular.

<table> 
    <tbody> 
    <tr> 
     <td>One</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Four</td> 
     <td>Five</td> 
    </tr> 
    </tbody> 
</table> 

table td 
{ 
    border: 1px solid black; 
} 

Quiero el TD que contiene el texto "cinco" para no tener un borde pero de nuevo, no quiero utilizar una clase.

Answer 1

Puede utilizar las reglas relativas:

table td + td + td + td + td { 
    border: none; 
} 

Esto sólo funciona si el número de columnas no se determina en tiempo de ejecución.

Answer 2

El selector :last-child debería hacerlo, pero es not supported in any version of IE.

Me temo que no tiene más remedio que usar una clase.

Answer 3

Javascript es la única forma viable de hacer este lado del cliente (es decir, CSS no lo ayudará). En jQuery:

$("table td:last").css("border", "none"); 

Answer 4

usted podría utilizar la clase pseudo-infantil última

table tr td:last-child { 
    border: none; 
} 

Esto estilo de la última td solamente. Aún no es totalmente compatible, por lo que puede ser inadecuado

Answer 5

No es una respuesta directa a su pregunta, pero usar < tfoot> puede ayudarlo a lograr lo que necesita y, por supuesto, puede personalizarlo.

Answer 6

Si ya está usando javascript, eche un vistazo a jQuery. Es compatible con un selector de "último hijo" independiente del navegador y puede hacer algo como esto.

$("td:last-child").css({border:"none"}) 

Answer 7

Para IE, cómo sobre el uso de una expresión CSS:

<style type="text/css"> 
table td { 
    h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : '1px solid #000')); 
} 
</style> 

Answer 8

Puede utilizar el elemento COL como se especifica en HTML 4.0 (link). Funciona en todos los navegadores. Puede darle una identificación o una clase o un estilo en línea. La única advertencia es que afecta a toda la columna en todas las filas. Ejemplo:

<table> 
    <col /> 
    <col width="50" /> 
    <col id="anId" /> 
    <col class="whatever" /> 
    <col style="border:1px solid #000;" /> 
    <tbody> 
     <tr> 
      <td>One</td> 
      <td>Two</td> 
      <td>Three</td> 
      <td>Four</td> 
      <td>Five</td> 
     </tr> 
    </tbody> 
</table> 

Answer 9

Este es el código que agregará borde para todos los nodos y eliminará el borde del último nodo (TD).

<style type="text/css"> 
    body { 
     font-family:arial;font-size: 8pt; 
    } 
    table td{ 
     border-right: #666 1px solid 
    } 

    table td { 
     h: expression(this.style.border = (this == this.parentNode.lastChild ? 'none' : 'border-right: 0px solid')); 
    } 
</style> 
<table> 
    <tr> 
     <td>Home</td> 
     <td>sunil</td> 
     <td>Kumar</td> 
     <td>Rayadurg</td> 
     <td>Five</td> 
     <td>Six</td> 
    </tr> 
</table> 

gustarán ...

Quiero el mismo lugar de la frontera que quería que el uso de imágenes ... :-)

Answer 10

En jQuery, siempre que la tabla se crea estática o dinámicamente antes a la siguiente en ejecución:

$("table tr td:not(:last-child)").css({ "border-right":"1px solid #aaaaaa" }); 

sólo añade un borde derecho de cada célula en una fila de la tabla, excepto la última celda.

Answer 11

También hay un enfoque diferente ... y esto funcionaría para las tablas que no son estáticas ...básicamente utilizar <th> en lugar de <td> para esa columna:

<style type="text/css"> 
table td { border: 1px solid black; } 
table th { border: 0px; } 
<style> 
<table> 
    <tbody> 
    <tr> 
     <td>One</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Four</td> 
     <th>Five</th> 
    </tr> 
    <tr> 
     <td>One</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Four</td> 
     <th>Five</th> 
    </tr> 
    </tbody> 
</table> 

Answer 12

que estaba buscando una manera de hacer esto también y encontramos esta, podría ser útil para otras personas:

#table td:last-of-type { border: none; } 

Tenga en cuenta que no es compatible por IE tampoco.

Answer 13

Usted puede usar la pseudo-clase :last-of-type:

tr > td:last-of-type { 
    /* styling here */ 
} 

Ver the MDN para obtener más información y la compatibilidad con los diferentes navegadores.
Consulte W3C CSS guidelines para obtener más información.

Answer 14

tratan con:

tr:last-child td:last-child{ 
    border:none; 
    /*any other style*/ 
} 

esto sólo afectará el último elemento td en la tabla, suponiendo que es el único (persona, usted sólo tendrá que identificar su mesa). Sin embargo, es muy general y se adaptará al último TD si agrega más contenido a su tabla. Por lo tanto, si se trata de un caso particular

td:nth-child(5){ 
    border:none; 
} 

debería ser suficiente.