2009-10-29 2 views
0

봐 50 % 높이를 설정하기 시작하고 일정을 포함 문자열의방법이 코드에 웹킷에 대한 테이블 셀 (크롬, 사파리)

<html> 
<body> 
    <table border="1px"> 
     <tr> 
      <th align="center" width="70px">Name</th> 
      <th align="center" width="70px">State</th> 
      <th align="center" width="70px">Enabled</th> 
      <th colspan="2">Date &amp; Time</th> 
      <th>Message</th> 
     </tr> 
     <tr> 
      <td rowspan="2"> 
       <span>Import</span> 
      </td> 
      <td rowspan="2" align="center"> 
       Idle 
      </td> 
      <td rowspan="2" align="center"> 
       Yes 
      </td> 
      <td style="width:150px;">Start:</td> 
      <td style="width:150px">28.10.2009 00:00:00</td> 
      <td rowspan="2"> 
       The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating). 
      </td> 
     </tr> 
     <tr> 
      <td>Schedule:</td> 
      <td>28.10.2009 13:41:37</td> 
     </tr> 
    </table> 
</body> 

높이가 동일하게 필요하다. IE에서는 파이어 폭스의 높이가 기본적으로 동일합니다. 그것은 CSS를 사용하여 WebKit에 대해 동일한 것을 구현할 수 있습니까? 방법? (높이 하드 코딩은 금지되어 있습니다. 메시지 크기는 동적으로 생성됩니다.)

답변

1

신장의 문제점 : 50 %? (주변 테이블, 몸과 HTML은 높이가 필요합니다 : 100 %뿐만 아니라.)

+0

좋아, 어느 컨테이너에서 테이블을 배치해야합니까? 높이를 설정하는 방법? –

0

이 당신이 원하는 것을 할 것입니다 : height=50% 걸릴 것

<html> 
<body> 

<table border="1" style="height:100%; width:100%;"> 
    <tr style="height:6%;"> 
    <th align="center" style="width:70px;">Name</th> 
    <th align="center" style="width:70px;">State</th> 
    <th align="center" style="width:70px;">Enabled</th> 
    <th align="center" colspan=2>Date &amp; Time</th> 
    <th align="center" style="width:70px;">Message</th> 
    </tr> 
    <tr> 
    <td align="center" rowspan=2>Import</td> 
    <td align="center" rowspan=2>Idle</td> 
    <td align="center" rowspan=2>Yes</td> 
    <td style="height:47%; width:150px;">Start:</td> 
    <td style="height:47%; width:150px;">28.10.2009 00:00:00</td> 
    <td rowspan=2 style="height:100%; wifth:70px;">The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating).The job succeeded. The Job was invoked by User sa. The last step to run was step 1 (Updating). 
    </td> 
    </tr> 
    <tr> 
    <td>Schedule:</td> 
    <td>28.10.2009 13:41:37</td> 
    </tr> 
</table> 

</body> 
</html> 

일부 브라우저는 높이가 50 %가 될 것을 의미하는 테이블 전체의 높이는 <td>, 높이는 각각 47 %, <th>으로 높이를 6 %로 설정했습니다. IE (놀랍게도)를 제외하고는 테이블이 정상적으로 크기가 조정되지 않는 버그가 있습니다. 특히 브라우저 창 너비가 줄어들면서 두 개의 하단 셀이 더 커지고 상단 셀은 더 짧아집니다. 당신은 숫자로 놀 수 있어야하며, 당신의 필요에 맞게 만들어야합니다. 그렇지 않은 경우 table 초보다는 div 초를 고려해야합니다.