আমি কি টেবিল, টিআর বা টিডি এর জন্য ন্যূনতম উচ্চতা ব্যবহার করতে পারি?

Question

আমি কোনও টেবিলে প্রাপ্তির কিছু বিশদ দেখানোর চেষ্টা করছি।

আমি চাই যে পণ্যগুলি দেখানোর জন্য সেই টেবিলটির ন্যূনতম উচ্চতা থাকবে। সুতরাং যদি কেবলমাত্র একটি পণ্য থাকে, টেবিলের শেষে কমপক্ষে কিছু সাদা জায়গা থাকতে পারে। অন্যদিকে যদি 5 বা ততোধিক পণ্য থাকে তবে এটি খালি জায়গা হবে না।

আমি এই সিএসএস দিয়ে চেষ্টা করেছি:

table,td,tr{
  min-height:300px;
}

কিন্তু এটা কাজ করছে না।

আগাম ধন্যবাদ.

Comments

আপনি যদি আমাদের কোডটি চেষ্টা করার জন্য একটি ঝাঁকুনি তৈরি করেন তবে এটি সহায়ক হবে।

— mavrosxristoforos

Answer 1

এটি খুব ভাল সমাধান নয় তবে এটির মতো চেষ্টা করে দেখুন:

<table>
    <tr>
        <td>
            <div>Lorem</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>Ipsum</div>
        </td>
    </tr>
</table>

এবং ডিভগুলি সর্বনিম্ন উচ্চতায় সেট করুন:

div {
    min-height: 300px;
}

আশা করি এটি আপনি চান ...

Comments

@ স্যাক্সিসান আপনাকে ডিভগুলি ক্লাস দেওয়া দরকার এবং তারপরে এই নিয়মটি কেবলমাত্র সেই শ্রেণীর জন্য প্রযোজ্য করা যায়

— জাচারি ওয়েক্সেলবাউম

Answer 2

heighttdযেমন কাজের জন্য min-height:

td {
  height: 100px;
}

পরিবর্তে

td {
  min-height: 100px;
}

টেবিল কোষগুলি বৃদ্ধি পাবে যখন সামগ্রীগুলি মাপসই করা হয় না।

https://jsfiddle.net/qz70zps4/

Comments

আমার Google Chrome (সংস্করণ 47.0.2526.106 মিটার) একটি উইন্ডোজ 7 চলমান, আমি দেখা গেছে যে সেটিং heightএকটি এর tdআসলে একটি হিসাবে প্রক্রিয়াকৃত হয় paddingউপরে এবং নীচে, যা কিছু লেআউট সমস্যা পরিচয় করিয়ে দিতে পারে আপনি কি মনে করেন এটা সত্যিই একটি এর heightস্থান। এটি ডিভাইসগুলিতে কোনও শৈলী বা গণিত শৈলী হিসাবে দেখায় না, তবে আপনি যখন পরিদর্শন করা এইচটিএমএল উপাদানটির উপর মাউস রাখেন তখন এটি স্ক্রিনে প্রদর্শিত হয়।

— ফেলিপ অলিভিরা

কিন্তু প্রশ্নটি ন্যূনতম উচ্চতায় ছিল যা কার্যকর হয় না! আপনার যদি দীর্ঘ পাঠ্য থাকে এবং উচ্চতার সাথে অন্য একটি রেখার প্রয়োজন হয় তবে তা গণ্ডগোল হয়ে যাবে

— সিএমএস

মত @CMS বলেন, জানতে চাইলে min-heightনা heightকিন্তু @frank যেমন ব্যাখ্যা করে নীচের এটি জন্য একই আচরণ করবে table td। সুতরাং এটির জন্য আরও কিছুটা আরও ভাল ব্যাখ্যা দরকার।

— dft

এটি অবশ্যই গৃহীত উত্তরগুলির চেয়ে উত্তম উত্তর।

— জিনজুবি

এই উত্তরটি আমার সবেমাত্র সম্ভাব্য কয়েক ঘন্টা কাজ সাশ্রয় করেছে, উত্তর হওয়া উচিত।

— লুক প্রিং

Answer 3

সমাধান ছাড়াই divসিউডো উপাদান ব্যবহার ::afterকরা হয় যেমনটি প্রথম tdসারিতে থাকে min-height। আপনার এইচটিএমএল ক্লিন সংরক্ষণ করুন।

table tr td:first-child::after {
   content: "";
   display: inline-block;
   vertical-align: top;
   min-height: 60px;
}

Answer 4

সিএসএস ২.১-এ, টেবিল, ইনলাইন টেবিল, সারণী ঘর, সারণি সারি এবং সারি গোষ্ঠীতে 'ন্যূনতম উচ্চতা' এবং 'সর্বাধিক উচ্চতা' এর প্রভাব অপরিজ্ঞাত।

সুতরাং বিষয়বস্তুটি একটি ডিভেকে মোড়ানোর চেষ্টা করুন এবং ডিভকে এখানে একটি min-height জেএসফিডাল দিন

<table cellspacing="0" cellpadding="0" border="0" style="width:300px">
    <tbody>
        <tr>
            <td>
                <div style="min-height: 100px; background-color: #ccc">
                Hello World !
                </div>
            </td>
            <td>
                <div style="min-height: 100px; background-color: #f00">
                Goog MOrning !
                </div>
            </td>
        </tr>
    </tbody>
</table>

Answer 5

আপনি যদি স্টাইল সেট করেন = "উচ্চতা: 100px;" একটি টিডিতে টিডির কোষটি এর চেয়ে বেশি বাড়তে থাকে এমন কোনও টিডি থাকলে এটি কোনও টিডি-তে ন্যূনতম উচ্চতার প্রয়োজন হয় না।

Answer 6

টেবিলগুলি এবং টেবিলের ঘরগুলি min-heightসম্পত্তিটি ব্যবহার করে না , তাদের সেটিংস heightন্যূনতম উচ্চতা হবে কারণ সামগ্রীগুলি প্রসারিত করলে টেবিলগুলি প্রসারিত হবে।

Answer 7

আপনার টেবিল সারির কোনও একক ঘরে নূন্যতম উচ্চতার সিএসএস এন্ট্রিটি ব্যবহার করুন। পুরানো ব্রাউজারগুলিতেও কাজ করে।

.rowNumberColumn {
    background-color: #e6e6e6;
    min-height: 22;
}

<table width="100%" cellspacing="0" class="htmlgrid-table">
    <tr id="tr_0">
            <td width="3%" align="center" class="readOnlyCell rowNumberColumn">1</td>
            <td align="left" width="40%" id="td_0_0" class="readOnlyCell gContentSection">411978430-Intimate:Ruby:Small</td>