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

tablas html avanzado

Question

Quiero diseñar el último TD en una tabla sin usar una clase CSS en el TD 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 que el TD que contiene el texto "Cinco" no tenga borde pero, una vez más, no quiero usar una clase.

Answer 1

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 2

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

Answer 3

Para IE, ¿qué hay de usar 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 4

Puede usar el elemento col como se especifica en HTML 4.0 ( enlace ). 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 5

Puedes usar reglas relativas:

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

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

Answer 6

En jQuery, siempre que la tabla se cree de forma estática o dinámica antes de que se ejecute lo siguiente:

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

Simplemente agrega un borde derecho a cada celda en una fila de la tabla, excepto la última celda.

Answer 7

También hay un enfoque diferente ... y esto funcionaría para tablas que no son estáticas ... básicamente usan <th> 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 8

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 9

podrías usar la clase psuedo de último hijo

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

Esto peinará el último td solamente. Aún no es totalmente compatible, por lo que puede ser inadecuado

Answer 10

Estaba buscando una manera de hacer esto también y encontré esto, podría ser útil para otras personas:

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

Tenga en cuenta que tampoco es compatible con IE.

Answer 11

Puede usar la :last-of-type clase de pseudoclase:

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

Consulte el MDN para obtener más información y compatibilidad con los diferentes navegadores.
Consulte las pautas de W3C CSS para obtener más información.

Answer 12

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>

Disfruta ...

Quiero lo mismo en lugar de borde lo quería usando imágenes ... :-)

Answer 13

El selector :last-child debería hacerlo, pero no es compatible con ninguna versión de IE .

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

Answer 14

prueba con:

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

esto solo afectará al último elemento td en la tabla, suponiendo que sea el único (de lo contrario, solo tendrá que identificar su tabla). Sin embargo, es muy general y se adaptará al último TD si agrega más contenido a su tabla. Entonces, si es un caso particular

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

debería ser suficiente.