tr td 형식을 지정하는 사용자 지정 CSS이지만 td 내부에서 굵게 감지 된 경우에는 아님
user1033882
이것이 가능한지 모르겠지만 ... 특정 모양을 갖기 위해 css로 테이블을 포맷하려고합니다. 이것은 내 고객이 업데이트 할 워드 프레스 사이트입니다. 문제는 그녀가 특정 형식의 테이블을 복사 / 붙여 넣기 할 것이고, 추가 작업을하지 않고도 테이블에 해당 형식이 있기를 원한다는 것입니다. 이것이 내가 지금까지 가지고있는 것입니다.
굵은 텍스트가 있는 셀에는 아래에 점선이 표시되지 않도록합니다. 지금은 다음과 같이 점선을 추가하기 위해 tr 라인을 포맷하고 있습니다.
HTML
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
CSS
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
굵은 텍스트가있는 각각에 대해 사용자 정의 클래스 태그를 추가하지 않고도이를 수행 할 수있는 방법이 있습니까?
이것이 내가 원하는 모습이지만 이것은 모두 수동으로 수행됩니다 ... 그게 내가 피하려고하는 것입니다. 
추신 : 때로는 테이블에 굵은 글자 아래에 1 개 이상의 '데이터'가있을 수 있으므로 '제목'과 '연극'에 관해서는 항상 이상하고 짝수 라인이 아닙니다. (뮤지컬 플레이 사이트)
-감사
m4n0
@Manoj Kumar 그래 대담한 항목은 항상 colspan 2 아래에 있습니다.
위의 주석을 언급 했으므로 CSS 해킹이 있습니다.
- 요소
td대신에 점선 테두리 만 갖도록 CSS를 변경하십시오tr. colspan=2테두리가 없도록 속성 선택기로 요소를 타겟팅합니다 .
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</table>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
CSS : CSS 클래스의 마지막 <td>에 스타일을 적용하는 방법 (<tr>의 마지막 <td> 아님)
- 2
td에서 숫자 서식 지정
- 3
tr border-bottom을 사용하지만 td는 사용하지 않는 방법
- 4
지정된 값을 사용하여 테이블에서 td를 색칠하는 방법은 무엇입니까?
- 5
파이썬 정규식을 사용하여 '.'제외 끝에 있지만 문자열 내부가 아님
- 6
CSS는 직계 자식을 선택하지만 다른 중첩 자식 안에있는 경우에는 아님
- 7
XML에 지정된 색상 / bgcolors / 굵게 / 밑줄 서식 지정
- 8
다른 자식 td 요소에서 부모 tr 요소 내부의 td 요소 값을 확인하는 방법
- 9
파일에 사용 된 압축 유형을 감지하는 방법은 무엇입니까? (파일 확장자가 지정되지 않은 경우)
- 10
PHP : 테이블의 새 행만 굵게 표시하고 형식을 지정하지 않고 나머지 (데이터는 사용자가 입력 함)
- 11
숫자 형식을 지정하는 텍스트 상자에 대한 녹아웃 사용자 지정 바인딩을 어떻게 만듭니 까?
- 12
수동 wait ()를 사용하여 CodeceptJS / Puppeteer 사용자 지정 도우미를 가져와야 테이블 (td tr)을 볼 수 있습니다.
- 13
<MvcMovie.Models.Movie> 예제에서 개별 <td> 열의 형식을 지정하는 방법
- 14
TD 치수 내에 유지되는 TD에 테두리 적용
- 15
td에 동적 값을 배치하고 싶습니다. 테이블에는 td가 너무 많지만 특정 td에 값을 배치하고 싶습니다.
- 16
이전 데이터를 지우지 않는 테이블에서 Ajax 호출을 사용하는 TD 텍스트
- 17
Thunar의 폴더에 사용자 지정 아이콘 (엠블럼 아님)을 배치하는 방법
- 18
Thunar의 폴더에 사용자 지정 아이콘 (엠블럼 아님)을 배치하는 방법
- 19
tr td jquery 각 이전 td 값이 변수에 저장되지 않습니다.
- 20
오류를 인쇄 할 문자를 입력하지만 c에 0이 입력 된 경우는 아님
- 21
GitHub에 게시 된 웹 사이트가 내 CSS 형식을 지정하지 않음
- 22
부분적으로 스타일을 지정해야하는 <td>에 문자열이 있습니다.
- 23
지정된 td 내에서 입력 필드의 특정 값 찾기
- 24
배경과 내용이 지정된 내부 사각형 (모든 프레임이 아닌) 내에서만 그려진 버튼을 만듭니다.
- 25
배경과 내용이 지정된 내부 사각형 (모든 프레임이 아닌) 내에서만 그려진 버튼을 만듭니다.
- 26
이용 약관이 체크 아웃 된 경우에만 Stripe 사용자 지정 양식 제출
- 27
사용자 지정 게시물 유형이 현재 코스 페이지 ID와 일치하는 코스 ID와 관련된 경우 제목 옆에 표시
- 28
jquery가 테이블 내에서 형제 td 텍스트를 설정하는 데 작동하지 않습니다.
- 29
td에 ID가없는 경우 클릭 된 td 요소 식별
몇 마디 만하겠습니다