100% প্রস্থের সারণী উপচে পড়া ডিভ ধারক


136

আমার এইচটিএমএল টেবিলটি নিয়ে সমস্যা রয়েছে যা এর মূল পাত্রে উপচে পড়ছে।

.page {
    width: 280px;
    border:solid 1px blue;
}

.my-table {
    word-wrap: break-word; 
}

.my-table td {
    border:solid 1px #333;
}
<div class="page">
    <table class="my-table">
        <tr>
            <th>Header Text</th>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
            <th>Col 4</th>
            <th>Header Text</th>
        </tr>
        <tr>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>some data</td>
            <td>An archipelago is a chain or cluster of islands. The word archipelago is derived from the Greek ἄρχι- – arkhi and πέλαγος – pélagosthrough the Italian arcipelago. In Italian, possibly following a tradition of antiquity, the Arcipelago (from medieval Greek *ἀρχιπέλαγος) was the proper name for the Aegean Sea and, later, usage shifted to refer to the Aegean Islands (since the sea is remarkable for its large number of islands). It is now used to refer to any island group or, sometimes, to a sea containing a large number of scattered islands such as the Aegean Sea.[1]</td>
        </tr>
    </table>    
</div>

আমি কীভাবে শিরোনাম পাঠ্য এবং টেবিল সেল পাঠ্যকে এমনভাবে মোড়ানো করতে বাধ্য করতে পারি যাতে এটি তার ধারকটিতে সঠিকভাবে ফিট হবে? আমি কেবল একটি সিএসএস পদ্ধতি পছন্দ করব তবে জাভাস্ক্রিপ্ট (বা jQuery) ব্যবহার করার জন্যও সম্পূর্ণ উন্মুক্ত open

উত্তর:


252

বিশুদ্ধরূপে "এটি ডিভের সাথে ফিট করুন" দৃষ্টিকোণ থেকে আপনার টেবিল শ্রেণিতে নিম্নলিখিতটি যুক্ত করুন ( জেসফিডাল ):

table-layout: fixed;
width: 100%;

পছন্দসই হিসাবে আপনার কলাম প্রস্থ সেট করুন; অন্যথায়, স্থির বিন্যাস অ্যালগরিদম আপনার কলামগুলিতে টেবিলের প্রস্থকে সমানভাবে বিতরণ করবে।

দ্রুত রেফারেন্সের জন্য, এখানে টেবিল বিন্যাস অ্যালগরিদম, জোর আমার:

  • স্থির ( উত্স )
    এই (দ্রুত) অ্যালগরিদম দিয়ে, সারণির অনুভূমিক বিন্যাসটি কোষের সামগ্রীর উপর নির্ভর করে না ; এটি কেবলমাত্র টেবিলের প্রস্থ, কলামগুলির প্রস্থ এবং সীমানা বা ঘরের ব্যবধানের উপর নির্ভর করে।
  • স্বয়ংক্রিয় ( উত্স )
    এই অ্যালগরিদমে (যার জন্য সাধারণত দুটি পাসের বেশি প্রয়োজন হয় না), টেবিলের প্রস্থটি তার কলামগুলির প্রস্থ দ্বারা দেওয়া হয় [, বিষয়বস্তু দ্বারা নির্ধারিত] [এবং হস্তক্ষেপকারী সীমানা )।

    [...] এই অ্যালগরিদমটি অক্ষম হতে পারে কারণ এটির জন্য চূড়ান্ত বিন্যাসটি নির্ধারণ করার আগে ব্যবহারকারীর এজেন্টের টেবিলের সমস্ত সামগ্রীতে অ্যাক্সেস থাকা প্রয়োজন এবং একাধিক পাসের দাবি করতে পারে।

প্রতিটি অ্যালগরিদমের নির্দিষ্টকরণ দেখতে উত্স নথির মাধ্যমে ক্লিক করুন।


54

যোগ করার চেষ্টা করুন

word-break: break-all 

আপনার টেবিল উপাদান সিএসএস এ।

এটি টেবিলের কোষগুলিতে শব্দগুলি এমনভাবে ভাঙ্গতে পাবে যাতে টেবিলটি তার ধারণকৃত ডিভের চেয়ে আরও বেশি বৃদ্ধি পায় না, তবুও টেবিলের কলামগুলি গতিবেগের আকারে রয়েছে। jsfiddle ডেমো


10
আরও ভালword-wrap: break-word;
এপোলো

1
@ অ্যাপোলো - রাজি! আমি এটির পাশাপাশি আমার মূল জেসফিডাল ডেমোটিতেও ব্যবহার করেছি (উপরের উত্তর বডিটিতে লিঙ্কটি দেখুন)।
জন স্নাইডার

1
ব্লিঙ্ক ব্রাউজারগুলিতে word-break: break-wordযা সেরা কাজ করে।
ভোলভক্স

overflow-wrapসম্পত্তি পরিবর্তিত
হওয়ায়

18

যোগ করুন display: block;এবং overflow: auto;করতে .my-table। এটি কেবল 280pxআপনার প্রয়োগকৃত সীমা ছাড়িয়ে যেকোনো কিছুই কেটে ফেলবে । এর pélagosthroughচেয়ে বিস্তৃত শব্দের কারণে প্রয়োজনের সাথে এটিকে "সুন্দর দেখানোর" উপায় নেই 280px


কেবল আমার ক্ষেত্রে: আমার পিতামাতার সমস্ত প্রস্থের (উচ্চ রেজোলিউশনগুলিতে) ফিট করার জন্য আমার সারণীর প্রয়োজন ছিল, তাই আমি টেবিলটিকে একটি ডিভ দিয়ে ঘিরে রেখেছিলাম এবং এতে আপনার স্টাইলগুলি প্রয়োগ করেছি। এখন টেবিলটি সমস্ত পিতামাতার প্রস্থকে ব্যবহার করার চেষ্টা করবে তবে যদি টেবিলের সামগ্রীগুলি উপচে পড়ে থাকে তবে এটি স্ক্রোল বারটি উপস্থিত হয়।
manuman94

2

এতে যুক্ত করার চেষ্টা করুন td:

display: -webkit-box; // to make td as block
word-break: break-word; // to make content justify

ওভারফ্লোড টিডিএস নতুন সারির সাথে সারিবদ্ধ হবে।


1

ভাল, আপনার প্রতিবন্ধকতাগুলি দেওয়া, আমি মনে করি ডিভের overflow: scroll;উপর সেট করা .pageসম্ভবত আপনার একমাত্র বিকল্প। 280 পিক্সেল বেশ সংকীর্ণ এবং আপনার ফন্টের আকার দিলে শব্দ মোড়ানো একা এটি করে না। কিছু শব্দ মাত্র দীর্ঘ এবং মোড়ানো যায় না। আপনি হয় আপনার হরফ আকার হ্রাস করতে পারেন বা ওভারফ্লো: স্ক্রোল সঙ্গে যেতে পারেন।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.