배경색 이외의 것으로 테이블 행 강조 표시

배경 색상을 변경하지 않고 특정 표 행 (예 : 클릭 선택 사항)을 강조 표시하기위한 적절한 CSS 스타일을 찾으려고합니다. 행 색상 이미 내 응용 프로그램에 목적을 제공합니다.배경색 이외의 것으로 테이블 행 강조 표시

아마도 테두리를 눈에 띄게하거나 배경색을 변경하지 않는 무언가를하는 것입니다. 나는 다음을 시도했다.

border: 2px ...margin: -2px 또는 이와 비슷한 것을 시도했다. 그러나 테이블이 스크롤 될 때 특히 잘 보이지 않고 매우 두꺼운 경계가 없으면 좋은 강조 표시를 제공하지 않습니다. <tr> 요소의 테두리에 대한 브라우저 지원도 훌륭하지 않습니다.
outline: 3px ... 테이블을 포함하는 div가 스크롤 가능한 경우에만 상단과 하단에 표시되는 것으로 보입니다.
box-shadow: 5px 5px ... color insetdoesn't seem to display properly without messing up the table.

누구에게 좋은 CSS 제안이 있습니까?

출처

2013-09-24 Andrew Mao

변경에게 HTML로 :

<td style="padding:20px;"> 
    <div class="tdContentWrapper"> 
    <div>SomeStuff</div> 
    <div>SomeMoreStuff</div> 
    </div> 
</td>

변경 CSS에 :

#MyTable .tdContentWrapper:hover{ 
    background: black;

}

출처

2013-09-24 04:18:20

하나의 셀이 아닌 전체 행을 강조하고 싶습니다. –

어떻게 글꼴 미묘한 증가 패딩 및/또는 라인 높이를 늘리는 방법에 대한 -크기?

행은 해당 피어의 시각적 스타일에 영향을주지 않고 명시 적으로 강조 표시됩니다. 가능하다면 교대 배경에 따라 색상을 조정할 수도 있습니다.

출처

2013-09-24 04:48:19

<td> 요소의 CSS 선택기를 사용하여이 작업을 수행 할 수 있으며 두 끝을주의해야합니다. 예를 들어 믹스 인으로 바뀔 수있는 다음 스타일러스 코드를 만들었습니다. 트릭은 spread 값을 사용하여 원하지 않는면에 보일 경계선을 없애고 blur 및 가로/세로 값을 사용하여 원하는면에 좋은 효과를 얻는 것입니다. blur은 spread의 절반 이하 여야합니다.

shadow-color = rgba(0,0,0,0.5) 
shadow = 15px 
-shadow = - shadow 
blur = 5px 
spread = -10px 

tr.selected > td 
    box-shadow: 
     0 shadow blur spread shadow-color inset, 
     0 -shadow blur spread shadow-color inset 

// Since we have to, make the top left and bottom right corners the dark overlapping ones 
tr.selected > td:first-child 
    box-shadow: 
     shadow -shadow blur spread shadow-color inset, 
     0 shadow blur spread shadow-color inset 

tr.selected > td:last-child 
    box-shadow: 
     0 -shadow blur spread shadow-color inset, 
     -shadow shadow blur spread shadow-color inset

이 여전히 표시하기 위해 어떤 배경 색상을 수 있도록 다음과 같은 그림자의 경계를 만듭니다

enter image description here

그러나

, 정상 (비 삽입)이 작업을 수행 할 수 없습니다 박스 섀도우은 테이블 셀 사이에 표시되기 때문에 표시됩니다.

출처

2013-09-24 05:46:27

배경색 이외의 것으로 테이블 행 강조 표시

답변

관련 문제