올바른 CSS 서식

Question

모든 행을 반복하는 PHP 테이블이 있습니다. 난 테이블 행의 중간에 텍스트가 아직 전체 너비 + 앵커로 행의 높이를 가지고 싶어.

각 행에 9 TD가 있습니다. 그래서 모든 TD에 앵커를 적용했습니다. 나는 td p를 시도하고 높이를 50 %로 설정하거나 가운데 정렬을 시도했지만 작동하지 않습니다. CSS로 다시 시작해야한다고 생각합니다.

내 질문은 :

사람이 70 픽셀로 TR 높이를 적용 할 CSS 코드, 폭 100 %를 가지고있다. TD가 70px로 높습니다. 그런 다음 TD (또는 TR)의 전체 영역이 앵커가되어야하며 TR 높이 중간에 텍스트가있는 상태로 클릭 할 수 있습니다.

감사 책략

업데이트 :

여기

내 CSS 분명히 PHP http://jsfiddle.net/j8ptc/가 늘 올바르게 표시 자사의 PHP

Answer 1

사용의 onclick = ""는 TR 또는 TD 요소 내부 속성 때문에 전체 행을 갖거나 전체 셀을 클릭 할 수 있어야합니다.

this site을 사용하면 수직 정렬에 도움이됩니다.

Answer 2

꼭해야 할 일입니다.

table { 
    width: 100% 
    border-collapse: collapse; 
} 
table td { 
    border: 1px solid black; 
} 
table td a{ 
    height: 70px; 
    display: inline-block; 
    width: 200px; 
    padding: 3px; 
    text-decoration: none; 
} 

table td a { 
    text-align: center; 
    line-height: 70px; 
}​ 

결과는 fiddle입니다.

편집 :

,

line-height: 70px; 

을 제거하고 텍스트의 긴 줄을 차지합니다

word-wrap: break-word; 

를 추가, 그러나 그것은 수직 정렬이 어려워집니다.

셀 내용이 동적 인 경우 (또는 알 수없는 경우) 문제가 될 수 있습니다. 참조 용으로 Here's another question about it. 행운을 빕니다!

Answer 3

가장 좋은 해결책은 앵커를 완전히 제거하고 대신 행 (또는 더 나아가 테이블에 더 잘 타겟팅 됨)에 클릭 이벤트를 추가하는 것입니다. CSS를 사용하면 커서를 변경하여 링크를 나타낼 수 있습니다.

PHP :

echo '<table id="yourTable">'; 

while ($row = mysql_fetch_array($result)) 
{ 
    echo '<tr class="record" data-id="'.$row['id'].'">'; 
    echo '<td>'.$row['company'].'</td>'; 
    echo '<td>'.$row['project'].'</td>'; 
    echo '<td>'.$row['assignee'].'</td>'; 
    echo '<td>'.$row['current_milestone'].'</td>'; 
    echo '<td>'.$date=date("d-m-Y", strtotime($row['start_date'])).'</td>'; 

    // etc. 

    echo '</tr>' 
} 

echo '</table>'; 

자바 스크립트 :

var table = document.getElementById('yourTable'); 

table.onclick = function(e) 
{ 
    e = e || window.event; 

    var target = e.target || e.srcElement, 
     id; 

    if (target.tagName === 'TD') 
    { 
     target = target.parentNode; 
    } 

    if (target.tagName === 'TR' && target.className === 'record') 
    { 
     window.open('update.php?id=' + id, 'updateWindow'); 
    } 
} 

CSS :

tr 
{ 
    cursor: pointer; 
} 

td 
{ 
    height: 70px; 
}