وضع الجداول جنبا إلى جنب إذا كان هناك مساحة كافية على الشاشة

https://stackoverflow.com/questions/402817

03-07-2019
|

سؤال

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

وهذا يعمل تلقائيا مع الصور، عادة، ولكن هناك طريقة للقيام بذلك للجداول؟

المحلول

نعم، وتطبيق تعويم أسلوب CSS: غادر لعناصر الجدول

وهنا هو التمهيدي ممتازة على العائمة: http://css.maxdesign.com.au/floatutorial /

نصائح أخرى

ونصيحتي ستكون لتعويم الجدول (تذكر لتحديد عرض الجدول - اختيار واحد أن الكامل على شاشة غير عريضة).

table {
    width: 500px; /* important */
    float: left;
}

ولكن هذا قد عمل جدا (مجربة):

table {
    display: inline;
}

وهذه محاولة (يمكنك تغيير حجم الإطار):

<html>
<body bgcolor="red">
<p>
    <table bgcolor="green" style="float: right;">
    <tr>
        <td>sssssssssssssssssssssssssssssssssssssssssss</td>
    </tr>
    </table>

    <table bgcolor="blue" style="float: left;">
    <tr>
        <td>eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</td>
    </tr>
    </table>
</p>
</body>
</html>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow