ProgramingTip

테이블 셀의 링크를 전체 행 높이 채우기

bestdevel 2020. 11. 23. 19:45
반응형

테이블 셀의 링크를 전체 행 높이 채우기

데이터 테이블이 있고 셀은 링크입니다. 사용자가 테이블 셀의 아무 곳이나 클릭하고 링크를 따라갈 수 있도록하고 싶습니다. 두 줄 이상이지만 항상 그런 것은 아닙니다. 저는 {display : block}을 사용하여 대부분의 셀을 포함하는 링크를 얻습니다. 행에 두 줄의 셀이 하나 있고 다른 셀은 한 연속 때 한 줄은 테이블 행의 전체 세로 공간을 채우지. 다음은 샘플 HTML이며 http://www.jsfiddle.net/RXHuE/ 실제로 작동하는 것을 볼 수 있습니다 .

<head>
<style type="text/css">
  td {width: 200px}
  td a {display: block; height:100%; width:100%;}
  td a:hover {background-color: yellow;}
</style>
<title></title>
</head>
<body>
<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>
</body>

CSS에 약간의 변경이 필요합니다. 만들기 td height:100%;IE 8, FF 3.6 일을하지만, 크롬이 작동하지 않습니다.

td {
  width: 200px;
  border: solid 1px green;
  height: 100%
}
td a {
  display: block;
  height:100%;
  width:100%;
}

그러나 제작 height에 50pxIE와 FF뿐 아니라 크롬에 대한 작품

td {
  width: 200px;
  border: solid 1px green;
  height: 50px
}
td a {
  display: block;
  height:100%;
  width:100%;
}

편집하다 :

여기에 다른 게시물에서 직접 솔루션을 제공했습니다. 사용하는 것 display: inline-block;입니다. 이 Chrome, FF3.6, IE8 용 솔루션과 결합 될 때 작동합니다.

td {
  width: 200px;
  border: solid 1px green;
  height: 100%}
td a {
  display: inline-block;
  height:100%;
  width:100%;
}

최신 정보

다음 코드는 IE8, FF3.6 및 크롬에서 저에게입니다.

CSS

td {
  width: 200px;
  border: solid 1px green;
  height: 100%;
}
td a {
  display: inline-block;
  height:100%;
  width:100%;
}
td a:hover {
  background-color: yellow;
}

HTML

<table>
  <tbody>
    <tr>
      <td>
        <a href="http://www.google.com/">Cell 1<br>
        second line</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 2</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 3</a>
      </td>
      <td>
        <a href="http://www.google.com/">Cell 4</a>
      </td>
    </tr>
  </tbody>
</table>

예는 여기에 있습니다.

블록 요소에 임의의 큰 음의 여백과 동일한 패딩을 설정하고 숨겨진 오버플로를 설정합니다.

td {
    overflow: hidden;
}
td a {
    display: block;
    margin: -10em;
    padding: 10em;
}

http://jsfiddle.net/RXHuE/213/

다음 해킹 작업 [Chrome / Firefox / Safari에서 테스트 됨] td 및 anchor 요소에 대해 동일한 패딩을 사용합니다. 앵커의 경우 패딩 값의 -ve와 같은 여백도 있습니다.

HTML

<table>
    <tr>
        <td><a>Hello</a></td>
    </tr>
</table>

CSS :

td {                          
    background-color: yellow;                                                                              
    padding: 10px;                                                                                                            
}  
a {
    cursor:pointer;
    display:block;
    padding: 10px;
    margin: -10px;
}

작업 바이올린 : http://jsfiddle.net/JasYz/

파티에 조금 늦었지만 발견 한 좋은 해결책이 있습니다.

가상 요소와 함께 상대 및 절대 위치 요소의 조합을 사용하여 원하는 효과를 얻을 수 있습니다. 추가 마크 업이 필요하지 않습니다!

테이블 셀 ( <td>)을로 변경하고 태그 에 또는 유사 요소를 position: relative;만들고 설정 하고 사용 합니다.::before::after<a>position: absolute;top: 0; left: 0; right: 0; bottom: 0;

요소가 앵커 태그에 연결되어 있고 전체 테이블 셀을 차지하도록 지시하기 때문에 앵커 태그 자체의 실제 내용에 영향을주지 않고 서 앵커 태그가 최소한 해당 크기가 가상 강제합니다 (따라서 중앙 정렬을 유지합니다).

예를 들면

HTML :

<table>
  <tr>
    <td>
      <a>I'm centralised</a>
    </td>
    <td>
      <a>I'm 100% width</a>
    </td>
    <td>
      <a>AND I'm 100% height</a>
    </td>
    <td>
      <a>WITHOUT extra markup</a>
    </td>
    <td>
      <a>OR JavaScript!</a>
    </td>
  </tr>
</table>

CSS :

table {
  border-collapse: collapse;
  table-layout: fixed;
}
td {
  position: relative;
  width: 150px;
  border: 2px solid red;
}
td a {
  padding: 0.5em 1em;
}
td a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

도움이 되셨기를 바랍니다!

시도해 시도 display: block:

td a {display: block; height:100%;}

[편집] WTF ... FF 4 및 Chrome에서 작동하지 않음을 확인할 수 있습니다. 작동합니다 :

td a {display: block;  height: 2.5em; border: 1px solid red;}

이는 height:100%;테이블 셀에 정의되어 있지 않음을 의미합니다 . 아마도 이것은 셀이 콘텐츠에서 크기를 가져 오기 때문일 수 있습니다 (따라서 콘텐츠는 루프로 이어질 수 있기 때문에 "내 크기를 알려주세요"라고 말할 수 없음). 다음과 같이 셀의 높이를 설정해도 작동하지 않습니다.

td {width: 200px; height: 3em; padding: 0px}

다시 위의 코드는 실패합니다. 그래서 내 제안은 링크에 대해 정의 된 높이를 사용하는 것입니다 (폭을 생략 할 수 있습니다. 즉, 블록 요소의 경우 기본적으로 100 % 임).

[EDIT2] http://www.cssplay.co.uk/menus/ 에서 수백 개의 예제를 클릭 했지만 한 줄과 여러 줄 셀을 혼합 한 것은 없습니다. 사각 지대에 부딪힌 것 같습니다.

내 질문 에했던 것처럼 여기에 동일한 답변을 게시 할 것 입니다.

Jannis M 의 답변에 영감을 받아 다음을 수행했습니다.

$(document).ready(function(){    
    $('table tr').each(function(){
        var $row = $(this);
        var height = $row.height();
        $row.find('a').css('height', height).append('&nbsp;');  
    });       
});

&nbsp;빈 링크 (텍스트 노드를 포함하지 않음)를 스타일 (?) 할 수 없기 때문에 추가했습니다 .

내 업데이트 된 바이올린을 참조하십시오 .

약간의 자바 스크립트를 사용할 수 있습니다.

  <td onclick="window.location='http://www.google.com/'">
    <a href="http://www.google.com/">Cell 3</a>
  </td>

또는 셀 (div, span 등)을 완전히 채우고 보이지 않는 큰 요소를 감싸는 요소를 만들 수 있습니다. 

  <td>
    <a href="http://www.google.com/">
      <div style="width:100%; height:100%;">Cell 1<br>
      second line
      </div>
    </a>
  </td>

여기서 유일한 문제는 display : block을 사용하면 브라우저가 수직 정렬 : center ...를 무시하도록 강제한다는 것입니다.

죄송합니다.

배심원 단은 높이가 60 인 셀 하나와 br을 추가하여 20 픽셀을 차지하는 글꼴을 찾도록 조작했습니다. 그런 다음 2 줄 텍스트가있는 항목이 있다는 것을 깨달았습니다. 댕.

나는 자바 스크립트를 사용하게되었습니다. 자바 스크립트는 멋진 뾰족한 클릭기를 제공하지 않지만 텍스트 줄은 실제로 시각적 응답을 트리거합니다. 내가 원하는 곳이 아닙니다. 그러면 자바 스크립트가 '누락 된 모든 클릭을 포착합니다. '실제 href.

가장 우아한 솔루션은 아니지만 지금은 충분히 작동합니다.

이제 올바른 방법으로이 작업을 수행 할 수만 있다면 ....

onclick이 다루는 영역의 손에 마우스 아이콘 변경을 추가하는 방법에 대한 아이디어가 있습니까? 지금은 클릭 투 페이지가 작동하지만 아이콘은 텍스트에만 영향을 미치는 href에 도달 할 때만 변경됩니다.

<a>altogheter를 제거 onClick하고 <td>직접 추가하지 않겠습니까?

<head>
<style type="text/css">
td {
    text-align:center;
}
td:hover {
    cursor:pointer;
    color:#F00;
}
</style>
<title></title>
</head>
<body>
<table>
    <tbody>
        <tr>
            <td onclick="location.href='http://www.google.com/';">Cell 1<br />second line</td>
            <td onclick="location.href='http://www.google.com/';">Cell 2</a></td>
            <td onclick="location.href='http://www.google.com/';">Cell 3</td>
            <td onclick="location.href='www.google.com';">Cell 4</td>
        </tr>
    </tbody>
</table>

이렇게하면 중개인을 잘라냅니다.

추신 : 나는 이것이 몇 년 전에 질문되고 대답되었다는 것을 알고 있지만 위의 대답 중 어느 것도 내 경우 문제를 해결하지 못했습니다. 이것이 누군가를 돕기를 바랍니다.

나를 위해 유일한 해결책은 대체하는 것입니다 <table> <tr>와 <div>의 스타일들을 사용 display:table하고 display:table-row그에 따라.

그럼 당신은 대체 할 수있는 <td>단지와 <a>와와 스타일을 display:table-cell.

다양한 높이의 <td>내용물 에서도 완벽하게 작동합니다 .

앵커가없는 원본 HTML :

<table>
  <tr>
    <td>content1<br>another_line</td>
    <td>content2</td>
  </tr>
</table>

이제 다음과 같이됩니다.

a:hover
{
  background-color:#ccc;
}
    <div style="display:table; width:100%">
      <div  style="display:table-row">
        <a href="#" style="display:table-cell; border:solid 1px #f00">content1<br>another_line</a>
        <a href="#" style="display:table-cell; border:solid 1px #f00">content2</a>
      </div>
    </div>

참고 URL : https://stackoverflow.com/questions/3966027/make-link-in-table-cell-fill-the-entire-row-height

반응형

'ProgramingTip' 카테고리의 다른 글

자바 펼쳐 함수에서 'undefined'또는 'null'을 반환하는 것이 더 낫습니까?  (0) 2020.11.23
INPUT 태그의 ID 속성을 어떻게 사용할 수 있습니까?  (0) 2020.11.23
Parallel.ForEach는 대형 개체가있는 열거 형으로 작업하는 경우 "메모리 부족"예외를 유발할 수 있습니다.  (0) 2020.11.23
asp.net mvc보기 모델의 언어  (0) 2020.11.23
OpenVPN 연결 실패 /이 시스템의 모든 TAP-Win32 어댑터가 현재 사용 중입니다.  (0) 2020.11.23

'ProgramingTip'의 다른글

  • 현재글테이블 셀의 링크를 전체 행 높이 채우기

관련글

댓글

티스토리툴바