সারণি সারির উচ্চতা নির্ধারণ করা হচ্ছে

Question

আমার এই কোডটি রয়েছে:

<table class="topics" >
    <tr>
        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">Test</td>
        <td style="padding: 0 4px 0 0;">1.0</td>
        <td>abc</td>
    </tr>
    <tr>

        <td style="white-space: nowrap; padding: 0 5px 0 0; color:#3A5572; font-weight: bold;">test2</td>
        <td style="padding: 0 4px 0 0;">1.3</td>
        <td>def</td>
    </tr>
</table>

সারিগুলি অনেক দূরে ব্যবধানে রয়েছে। আমি একসাথে লাইন চাই।

আমি যা করেছি তা হ'ল নিম্নলিখিত সিএসএস যুক্ত করা কিন্তু এটির কোনও পরিবর্তন হবে বলে মনে হয় না।

.topics tr { height: 14px; }

আমি কি ভুল করছি?

Comments

সম্পর্কিত: স্ট্যাকওভারফ্লো.com

— প্রশ্নগুলি

Answer 1

এটা চেষ্টা কর:

.topics tr { line-height: 14px; }

Comments

আমি বুঝতে পারি না কেন এটিতে এত বেশি ভোট রয়েছে, এটি সমস্যার সমাধান করে না। এটি কেবল তখনই কাজ করে যদি আপনার কাছে 1 টি পাঠ্য পাঠ্য থাকে tr। এই সমাধানটি উচ্চতার নয়, লাইন উচ্চতা নির্ধারণ করে tr।

— বেনআর

পরবর্তী মন্তব্যে যেমন উল্লেখ করা হয়েছে। উচ্চতাটি আপনার বৃহত্তম সামগ্রীর উচ্চতার চেয়ে বড় হতে হবে। অন্যথায়, এটি কেবল সর্বনিম্ন উচ্চতা হিসাবে বৃহত্তম সামগ্রীর উচ্চতা ব্যবহার করবে। এবং হ্যাঁ, এটি কেবলমাত্র এক লাইনের পাঠ্যের জন্য কাজ করে।

— বরুণ চ্যাটার্জি

এটি শুধুমাত্র এক লাইনের পাঠ্যের ক্ষেত্রে কার্যকর।

— শেখার্দতু

Answer 2

এর জন্য বৈশিষ্ট্যটি সেট করার চেষ্টা করুন td :

.topic td{ height: 14px };

Comments

দেখে মনে হচ্ছে না (ক্রোমিয়াম 12 / উবুন্টু 11.04) ।

— ডেভিড বলছেন মনিকা

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

— সাইমন_উইভার

@ ডেভ আমার ক্ষেত্রেও কেবল @daveসমাধান সমাধান করেছে। বা line-heightসাথে কাজ করে না । মূল পোস্টটি ছয় বছরের পুরানো এবং এইচটিএমএল / সিএসএসের কিছু বিধি এখনই এইচটিএমএল 5 ব্যবহার করছে বলে কিছু পরিবর্তন হতে পারে বলে নিশ্চিত নয়। trtd

— নাম

এছাড়াও, আমার অভিজ্ঞতা হিসাবে , আপনি যদি ট্রের উপর একটি উচ্চতা নির্ধারণ করেন এবং তারপরে একটি 100% উচ্চতা বা এর ভিতরে টিডির কোনও উচ্চতা নির্ধারণ করেন তবে আমি বিশ্বাস করি যে সিস্টেমটি মনে করে যে উচ্চতা টিডিতে সেট করা আছে এবং এটি উচ্চতার অনুসরণ করে না tr এবং সারিটি ডিফল্ট উচ্চতায় সেট করা আছে। তাই শুধু টিডি উপর উচ্চতা সেট করুন। এই কারণেই আমি এই উত্তরটি

— upvated

Answer 3

আপনি যদি border-collapse: collapse;নিজের টেবিলে সিএসএসের বিবৃতি রাখেন তবে আপনি কিছু অতিরিক্ত ব্যবধান সরিয়ে ফেলতে পারেন ।

Answer 4

আমি আমার উদ্দেশ্যগুলির সর্বাধিক উত্তরটি ব্যবহার করলাম:

.topics tr { 
    overflow: hidden;
    height: 14px;
    white-space: nowrap;
}

white-space: nowrapগুরুত্বপূর্ণ, কারণ এটি একাধিক লাইনের জুড়ে ভঙ্গ থেকে আপনার সারি কক্ষে করতে বাধা দেয়।

আমি ব্যক্তিগতভাবে text-overflow: ellipsisআমার thএবং tdউপাদানগুলিতে যুক্ত করতে চাই যাতে পিছনের ফুলস্টপ যুক্ত করে উপচে পড়া পাঠ্যটিকে আরও সুন্দর দেখায়Too long gets dots...

Answer 5

লাইন-উচ্চতা কেবলমাত্র তখনই কার্যকর হয় যখন এর সামগ্রীর বর্তমান উচ্চতা বড় হয় <td>। সুতরাং, টেবিলটিতে আপনার যদি 50x50 আইকন থাকে তবে trলাইন-উচ্চতা 50px (+ প্যাডিং) এর চেয়ে কম সারি তৈরি করবে না।

যেহেতু আপনি ইতিমধ্যে প্যাডিং সেট করেছেন 0সেটি অবশ্যই অন্য কিছু হতে হবে,
উদাহরণস্বরূপ এর ভিতরে একটি বড় ফন্ট-আকার tdযা আপনার 14px এর চেয়ে বড়।

Answer 6

আপনি বুটস্ট্র্যাপ ব্যবহার করে থাকেন, তাকান paddingআপনার এর tdগুলি।

Answer 7

একবারে আমাকে ইনলাইন সিএসএস ব্যবহার করে নির্দিষ্ট মূল্যবান সারিটির উচ্চতা ঠিক করতে হবে ..

<tr><td colspan="4" style="height: 10px;">xxxyyyzzz</td></tr>

Answer 8

আমার হিসাবে আমি প্যাডিংস ব্যবহার করার সিদ্ধান্ত নিয়েছি। এটি আপনার যা প্রয়োজন ঠিক তা নয় তবে কিছু ক্ষেত্রে এটি কার্যকর হতে পারে।

table td {
    padding: 15px 0;
}