테이블 행의 높이를 조절하는 방법

다음 HTML 테이블이 있는데 거기에 몇 가지 문제가 있습니다. 먼저 테이블의 행이 실제로 커지면 테이블 행은 그 안에 내용에 맞게 충분히 커야합니다. 둘째, 내부 div의 일부는 내가 답을 알아 낸 두 번째 라인테이블 행의 높이를 조절하는 방법

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .stopHoriz { 
      display:inline-block; 
      border: 1px solid black; 
      width:75px; 
      height:75px; 
      text-align:center; 
      font-size: .8em; 
     } 

     .stopVertical { 
      margin-bottom:3px; 
      border: 1px solid black; 
      width:75px; 
      height:75px; 
      text-align:center; 
      font-size: .8em; 
     } 
    </style> 
</head> 
<body> 

    <table border="1"> 
     <tr style="height:75px"> 
      <td colspan="2"> 
       <div style="padding-right: 30px; vertical-align:top"> 
        <div class="stopHoriz">Amusement</div> 
        <div class="stopHoriz">State Park</div> 
        <div class="stopHoriz">Zoo</div> 
        <div class="stopHoriz">History</div> 
        <div class="stopHoriz">Marine Encounters</div> 
        <div class="stopHoriz">Onset</div> 
        <div class="stopHoriz">Museum</div> 
        <div class="stopHoriz">Beaches</div> 
       </div> 
      </td> 
      <td rowspan="2" style="width:75px"> 
       <div style="padding-bottom: 30px; vertical-align:top"> 
        <div class="stopVertical">Amusement</div> 
        <div class="stopVertical">State Park</div> 
        <div class="stopVertical">Zoo</div> 
        <div class="stopVertical">History</div> 
        <div class="stopVertical">Marine Encounters</div> 
        <div class="stopVertical">Onset</div> 
        <div class="stopVertical">Museum</div> 
        <div class="stopVertical">Beaches</div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td rowspan="2" style="width:75px;"> 
       <div style="padding-top: 30px"> 
        <div class="stopVertical">Beaches</div> 
        <div class="stopVertical">Museum</div> 
        <div class="stopVertical">Onset</div> 
        <div class="stopVertical">Marine Encounters</div> 
        <div class="stopVertical">History</div> 
        <div class="stopVertical">Zoo</div> 
        <div class="stopVertical">State Park</div> 
        <div class="stopVertical">Amusement</div> 
       </div>    
      </td> 
      <td>Main</td> 
     </tr> 
     <tr style="height:75px"> 
      <td colspan="2"> 
       <div style="padding-left: 30px"> 
        <div class="stopHoriz">Beaches</div> 
        <div class="stopHoriz">Museum</div> 
        <div class="stopHoriz">Onset</div> 
        <div class="stopHoriz">Marine Encounters</div> 
        <div class="stopHoriz">History</div> 
        <div class="stopHoriz">Zoo</div> 
        <div class="stopHoriz">State Park</div> 
        <div class="stopHoriz">Amusement</div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2013-07-28 Paul Cavacas

죄송합니다. ** 처음 ** 문제에 대해 자세히 알려 주실 수 있습니까? –

이 표를 보면 첫 번째 열이 매우 높음을 알 수 있습니다. 그것의 중심에 상자들의 무리와 함께. 첫 번째 행을 안쪽 상자만큼 높이 올리고 싶습니다. –

에 포장 단어가 들어있는 것들 특히, 행의 된 div의 나머지 부분과 라인 중입니다. rowspan 문제를 일으키는 및 행을 제거하고 대신 두 번째 행의 음수 여백을 사용해야했습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     .stopHoriz { 
      display:inline-block; 
      border: 1px solid black; 
      width:75px; 
      height:75px; 
      text-align:center; 
      font-size: .8em; 
     } 

     .stopVertical { 
      margin-bottom:3px; 
      border: 1px solid black; 
      width:75px; 
      height:75px; 
      text-align:center; 
      font-size: .8em; 
     } 
    </style> 
</head> 
<body> 

    <table border="1"> 
     <tr style="height:75px;"> 
      <td colspan="2"> 
       <div style="padding-right: 30px; vertical-align:top"> 
        <div class="stopHoriz">Amusement</div> 
        <div class="stopHoriz">State Park</div> 
        <div class="stopHoriz">Zoo</div> 
        <div class="stopHoriz">History</div> 
        <div class="stopHoriz">Marine Encounters</div> 
        <div class="stopHoriz">Onset</div> 
        <div class="stopHoriz">Museum</div> 
        <div class="stopHoriz">Beaches</div> 
       </div> 
      </td> 
     </tr> 
     <tr> 
      <td rowspan="2" style="width:75px;"> 
       <div style="padding-top: 30px"> 
        <div class="stopVertical">Beaches</div> 
        <div class="stopVertical">Museum</div> 
        <div class="stopVertical">Onset</div> 
        <div class="stopVertical">Marine Encounters</div> 
        <div class="stopVertical">History</div> 
        <div class="stopVertical">Zoo</div> 
        <div class="stopVertical">State Park</div> 
        <div class="stopVertical">Amusement</div> 
       </div>    
      </td> 
      <td>Main</td> 
      <td style="width:75px"> 
       <div style="padding-bottom: 30px; vertical-align:top; margin-top: -83px"> 
        <div class="stopVertical">Amusement</div> 
        <div class="stopVertical">State Park</div> 
        <div class="stopVertical">Zoo</div> 
        <div class="stopVertical">History</div> 
        <div class="stopVertical">Marine Encounters</div> 
        <div class="stopVertical">Onset</div> 
        <div class="stopVertical">Museum</div> 
        <div class="stopVertical">Beaches</div> 
       </div> 
      </td> 
     </tr> 
     <tr style="height:75px"> 
      <td colspan="2"> 
       <div style="padding-left: 30px"> 
        <div class="stopHoriz">Beaches</div> 
        <div class="stopHoriz">Museum</div> 
        <div class="stopHoriz">Onset</div> 
        <div class="stopHoriz">Marine Encounters</div> 
        <div class="stopHoriz">History</div> 
        <div class="stopHoriz">Zoo</div> 
        <div class="stopHoriz">State Park</div> 
        <div class="stopHoriz">Amusement</div> 
       </div> 
      </td> 
     </tr> 
    </table> 
</body> 
</html>

출처

2013-07-28 14:53:36

테이블 행의 높이를 조절하는 방법

답변

관련 문제