HTML에서 테이블이 더 길어지는 것을 중지하십시오

Question

다음 테이블이 있습니다. 더 많은 상자 테이블을 만들 때 그것을 원했습니다. 테이블에 더 이상 공간이 없으면 다른 쪽 아래로 아래로 이동하여 테이블을 계속 유지하십시오.

<table width="417" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="413" height="179">
      <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="137" height="89">Box1</td>
        </tr>
      </table>
      <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
        <tr>
          <td width="137" height="89">Box2</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Answer 1

당신의 질문은 읽기 어렵지만 갈 것입니다.

나는 당신이 179 픽셀보다 높고 싶지 않은 메인 테이블이 있다고 가정합니다. 이 테이블 안에는 4 개의 상자가 넘는 경우에도 179 픽셀보다 높은 테이블을 만들지 않아야하는 상자를 배치합니다. 이를 해결하려면 스타일 오버플로가 필요합니다. 테이블이 너무 커지는 것을 막기 위해 숨겨져 있습니다. 불행히도 이것은 테이블 셀의 경우 작동하지 않으므로 오버플로가있는 DIV 요소를 추가해야합니다. 테이블 셀 내부에 숨겨진 스타일.

테이블 내부에 여분의 DIV 요소가있는 솔루션은 다음과 같이 보입니다.

<table width="417" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td width="413" height="179">
      <div style="height: 179px; overflow: hidden;" >
        <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="137" height="89">Box1</td>
          </tr>
        </table>
        <table width="141" border="1" align="left" cellpadding="0" cellspacing="0">
          <tr>
            <td width="137" height="89">Box2</td>
          </tr>
        </table>
      </div>
    </td>
  </tr>
</table>

물론 Niteriter가 지적한 것처럼 레이아웃에 DIV 태그를 사용하는 것이 좋습니다. 귀하의 상황에서 이것은 또한 훨씬 더 깨끗한 HTML/CSS 코드를 초래할 것입니다.

<style>
div.wrapper { height: 179px; width: 413px; overflow: hidden; }
div.box { float: left; height: 89px; width: 137px; }
</style>
<div class="wrapper" >
  <div class="box" > Box1 </div>
  <div class="box" > Box2 </div>
  <div class="box" > Box3 </div>
</div>

Answer 2

테이블이 아닌 레이아웃에 CSS 스타일을 사용해야합니다. 테이블은 레이아웃을 보충하는 것이 아니라 데이터 행을 표시하기위한 것입니다.

이걸 고려하세요:

<style type="text/css">

    .wrapper
    {
        padding:10px;
        overflow:auto;
        background-color:#888;
    }

    #box
    {
        float:left;
        width:150px;
        padding:10px;
        background-color:#aaa;
    }

</style>

<div class="wrapper">

    <div id="box">Box 1</div>

    <div id="box">Box 2</div>

    <div id="box">Box 3</div>

    <div style="clear:both;"></div>

</div> 

이 코드를 HTML 파일에 복사하고 브라우저 창과 함께 작동하여 작동 방식을 확인하십시오.