CSS로 테이블의 마지막 td 스타일 지정

CSS로 테이블의 마지막 td 스타일 지정

---

특정 TD에서 CSS 클래스를 사용하지 않고 테이블의 마지막 TD 스타일을 지정하고 싶습니다.

<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;
}

"Five"라는 텍스트가 포함 된 TD에 테두리가 없기를 원하지만 클래스를 사용하고 싶지 않습니다.

---

상대 규칙을 사용할 수 있습니다.

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

이것은 열 수가 런타임에 결정되지 않은 경우에만 작동합니다.

---

:last-child선택은 어떻게해야하지만, 그건 IE의 모든 버전에서 지원되지 않습니다 .

수업을 사용하는 것 외에는 선택의 여지가 없습니다.

---

:last-of-type의사 클래스를 사용할 수 있습니다 .

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

자세한 정보와 다른 브라우저와의 호환성 은 MDN 을 참조하십시오 . 자세한 내용
은 W3C CSS 지침 을 확인하세요 .

---

막내의 의사 수업을 사용할 수 있습니다.

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

마지막 td 만 스타일링합니다. 아직 완전히 지원되지 않으므로 적합하지 않을 수 있습니다.

---

이미 javascript를 사용하고 있다면 jQuery를 살펴보십시오. 브라우저 독립적 인 "마지막 자식"선택기를 지원하며 이와 같은 작업을 수행 할 수 있습니다.

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

---

시도 :

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

이것은 테이블의 마지막 td 요소에만 영향을 미칩니다. 단 하나라고 가정하면 (그렇지 않으면 테이블을 식별해야합니다). 그러나 매우 일반적이며 테이블에 더 많은 콘텐츠를 추가하면 마지막 TD에 적용됩니다. 그래서 특별한 경우라면

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

충분해야합니다.

---

자바 스크립트는이 클라이언트 측을 수행 할 수있는 유일한 방법입니다 (즉, CSS가 도움이되지 않습니다). jQuery에서 :

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

---

HTML 4.0 ( link )에 지정된대로 col 요소를 사용할 수 있습니다 . 모든 브라우저에서 작동합니다. ID, 클래스 또는 인라인 스타일을 제공 할 수 있습니다. 주의 할 점은 모든 행의 전체 열에 영향을 미친다는 것입니다. 예:

<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>

---

jQuery에서 다음이 실행되기 전에 테이블이 정적으로 또는 동적으로 생성되는 경우 :

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

마지막 셀을 제외한 테이블 행의 모든 ​​셀에 오른쪽 테두리를 추가하기 만하면됩니다.

---

질문에 대한 직접적인 대답은 아니지만 <tfoot>을 사용하면 필요한 것을 달성하는 데 도움이 될 수 있으며 물론 tfoot 스타일을 지정할 수 있습니다.

---

IE의 경우 CSS 표현식을 사용하는 방법은 다음과 같습니다.

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

---

나는 이것을 할 방법을 찾고 있었고 이것이 다른 사람들에게 유용 할 수 있음을 발견했습니다.

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

IE에서도 지원되지 않습니다.

---

There is also a different approach.. and this would work for tables that aren't static... basically use <th> instead of <td> for that column:

<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>

---

This is the code that will add border for all the nodes and will remove the border for the last node(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>

Enjoy ...

I want the same instead of border I wanted it using images ... :-)

참고URL : https://stackoverflow.com/questions/359821/styling-the-last-td-in-a-table-with-css