خلية HTML التي تحتوي على أشرطة التمرير CSS - كيف يمكنني التخلص من الحشو؟

StackOverflow https://stackoverflow.com/questions/2103629

  •  21-09-2019
  •  | 
  •  

سؤال

لدي جدول HTML ، حيث تحتوي كل خلية على كمية كبيرة من البيانات. أرغب في أن تكون كل خلية قابلة للتمرير بشكل فردي (نوع من "الأجزاء") ، لذلك قمت بإنشاء فئة CSS تتضمن سمة الفائض: التمرير. ومع ذلك ، فإن العرض ليس هو نفسه في كل مرة أقوم فيها بتوظيف فئة CSS. هذا يسبب مشكلة حشوة الخلية. عندما يتم تعريف العرض في ورقة الأنماط الخارجية (التي لا تعمل بالنسبة لي ، لأنني بحاجة إلى أن أكون قادرًا على ضبط عرض مختلف) ، يملأ "الجزء" الخلية بأكملها ، لكن عندما أعرّفها على مستوى الخلية ، هناك حشوة حول "الجزء" ، داخل الخلية.

هنا هو تعريف الفصل:

.imitationPane{
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: 000;
    margin-top: 5px;
    padding:5px;
    height: 200px;
    overflow: scroll
 }

هنا هو رمز HTML:

<table cellpadding=0 cellspacing=2 border=1 width=720>
    <tr>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
            </span>
        </td>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
<h1>AGAIN</h1>
            </span>
        </td>
    </tr>
    <tr>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
<h1>CELL 3</h1>
            </span>
        </td>
        <td align=left>
            <span class="imitationPane">
    Hello World bjkgkgdtfdfhbvufgfckjgetdkhgytffkgughkhyufrdyufukg<br><br><br>
<h1>CELL 4</h1>
            </span>
        </td>
    </tr>
</table>
هل كانت مفيدة؟

المحلول

لقد حللت هذا بعد دقائق من النشر ، على الرغم من أنني كنت أعمل عليه لعدة ساعات. كانت المشكلة الفعلية أنه عندما كان عرض الجدول أكبر من مجموع عرض كل خلية فردية (أو منطقة امتداد) ، ظهر حشوة الخلية. من قبيل الصدفة ، لقد جربت أعدادًا أكبر فقط في ورقة الأنماط الخارجية ، وصغيرة داخل الكود الفعلي ، لذلك يبدو أن المشكلة ناتجة عن المكان الذي كانت فيه البيانات ، وليس ما كانت عليه البيانات

نصائح أخرى

حسنًا ، لإضافة شيء ما إلى ذلك ، عند المظهر السريع ، قد يكون من المنطقي تطبيق خاصية التمرير على الجدول TD بدلاً من علامات Span. من الناحية المنطقية بعد ذلك ، عندما يتجاوز محتوى الخلية أبعاده المحددة ، فإنه يفيض ، وتطلب أن يتم عرض التدفق الزائد على أنه تمرير .... السمات التي تحددها في CSS تبدو أكثر ملاءمة لعناصر الجدول بدلاً من تمتد .... ولكن بالطبع أنت تعرف احتياجاتك بشكل أفضل.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top