وقف الجدول من الذهاب لفترة أطول في 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 بكسل. داخل هذا الجدول الذي وضع المربعات التي لا ينبغي أن تجعل الجدول أعلى من 179 بكسل حتى إذا كان هناك أكثر من 4 خانات. لحل هذا كنت بحاجة إلى تجاوز أسلوب: مخفي لوقف الجدول من النمو كبيرة جدا. للأسف هذا لا يعمل لخلايا الجدول لذلك كنت بحاجة إلى إضافة عنصر 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

ويجب عليك استخدام أساليب المغلق لتخطيطات، وليس الجداول. الجداول لعرض صفوف من البيانات، وليس لتشكيل لتخطيطات.

والنظر في هذا:

<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 واللعب مع نافذة المتصفح لمعرفة كيف يعمل.