সিএসএস টেবিল কলাম স্বতঃসিদ্ধ

Question 1

নিম্নলিখিতটি দেওয়া কীভাবে আমি আমার লিখিত কলামটির কন্টেন্টটির স্বয়ংক্রিয় আকার করব? (শেষ কলামটি সামগ্রীতে অটোসাইজ-প্রস্থ হওয়া উচিত ose ধরুন আমার কাছে কেবলমাত্র 1 লি উপাদান রয়েছে যা বনাম সঙ্কুচিত হওয়া উচিত 3 লি উপাদান ইত্যাদি):

            <table cellspacing="0" cellpadding="0" border="0">
            <thead><!-- universal table heading -->
                <tr>
                    <td class="tc first"><input type="checkbox" value="true" name="data-1-check-all" id="data-1-check-all"></td>
                    <td class="tc">Type</td>
                    <th>File</th>
                    <th>Sample</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td>Division 5</td>
                </tr>
                <tr>
                    <td>Division 1</td>
                    <td>Division 2</td>
                    <td>Division 3</td>
                    <td>Division 4</td>
                    <td class="last">
                        <ul class="actions">
                            <li><a class="iconStats" href="#">Statystyki</a></li>
                            <li><a class="iconEdit" href="#">Edytuj</a></li>
                            <li><a class="iconDelete" href="#">Usuń</a></li>

                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>

সিএসএস:

table { table-layout: fixed; width: 100%; }
table tr { border-bottom:1px solid #e9e9e9; }
table thead td, th {border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100% ; font-weight: bold; text-align:left;}
table tr td, th { border:1px solid #D5D5D5; padding:15px;}
table tr:hover { background:#fcfcfc;}
table tr ul.actions {margin: 0;}
table tr ul.actions li {display: inline; margin-right: 5px;}

Question 2

নিম্নলিখিত আপনার সমস্যার সমাধান করবে:

td.last {
    width: 1px;
    white-space: nowrap;
}

নমনীয়, শ্রেণিভিত্তিক সমাধান

এবং আরও নমনীয় সমাধান হ'ল একটি .fitwidthশ্রেণি তৈরি করছে এবং যে কোনও কলামে আপনি যে বিষয়বস্তুগুলি একটি লাইনে উপযুক্ত কিনা তা নিশ্চিত করতে চান তা প্রয়োগ করে:

td.fitwidth {
    width: 1px;
    white-space: nowrap;
}

এবং তারপরে আপনার এইচটিএমএলে:

<tr>
    <td class="fitwidth">ID</td>
    <td>Description</td>
    <td class="fitwidth">Status</td>
    <td>Notes</td>
</tr>

Question 3

আপনি যদি নিশ্চিত করতে চান যে শেষ সারিটি মোড় না দেয় এবং এভাবে আপনি যেভাবে চান সেটি আকার দেয় না, তবে একবার দেখুন

td {
 white-space: nowrap;
}

Question 4

আপনি সর্বশেষ টেবিল কক্ষ ব্যতীত সকলের প্রস্থ উল্লেখ করতে এবং একটি সারণী-বিন্যাস যুক্ত করতে পারেন: টেবিলটিতে স্থির এবং প্রস্থ।

আপনি সেট করতে পারে

table tr ul.actions {margin: 0; white-space:nowrap;}

(বা স্যান্ডার পরিবর্তে প্রস্তাবিত হিসাবে এটি সর্বশেষ টিডির জন্য সেট করুন)।

এটি ইনলাইন-এলআইগুলিকে না ভাঙ্গতে বাধ্য করে। দুর্ভাগ্যক্রমে এটি যুক্ত ইউএল (এবং এই প্যারেন্ট টিডি) তে একটি নতুন প্রস্থের গণনার দিকে নিয়ে যায় না এবং তাই শেষ টিডিটি স্বয়ংক্রিয় করে না।

এর অর্থ: যদি কোনও ইনলাইন উপাদানটির কোনও প্রস্থ না থাকে তবে একটি টিডির প্রস্থ সর্বদা স্বয়ংক্রিয়ভাবে প্রথমে গণনা করা হয় (নির্দিষ্ট না থাকলে)। তারপরে এই গণনা করা প্রস্থের সাথে এর ইনলাইন সামগ্রীটি রেন্ডার হয়ে যায় এবং white-space-প্রোপার্টি প্রয়োগ করা হয়, এর সামগ্রীটিকে গণনা করা সীমানার বাইরেও প্রসারিত করে।

সুতরাং আমি অনুমান করি যে একটি নির্দিষ্ট প্রস্থের সাথে শেষ টিডির মধ্যে একটি উপাদান থাকা ছাড়া এটি সম্ভব নয়।

Question 5

এর মতো অটো এবং মিনিট বা সর্বোচ্চ প্রস্থ ব্যবহার করুন:

td {
max-width:50px;
width:auto;
min-width:10px;
}