কোনও টিডির মধ্যে অবস্থান সম্পর্কিত / নিখুঁত ব্যবহার করছেন?

Question

আমার কাছে নিম্নলিখিত কোড রয়েছে:

<td style="position: relative; min-height: 60px; vertical-align: top;">
    Contents of table cell, variable height, could be more than 60px;

    <div style="position: absolute; bottom: 0px;">
        Notice
    </div>
</td>

এটি মোটেই কাজ করে না। কোনও কারণে, অবস্থান: আপেক্ষিক কমান্ডটি টিডিতে পাঠ করা হচ্ছে না এবং নোটিশ ডিআইভি আমার পৃষ্ঠার নীচে সামগ্রীর ধারকের বাইরে রাখা হচ্ছে placed আমি টিডির সমস্ত বিষয়বস্তু একটি ডিআইভিতে রাখার চেষ্টা করেছি যেমন:

<td>
    <div style="position: relative; min-height: 60px; vertical-align: top;">
        Contents of table cell, variable height, could be more than 60px;

        <div style="position: absolute; bottom: 0px;">
            Notice
        </div>
    </div>
</td>

তবে এটি একটি নতুন সমস্যা তৈরি করে creates যেহেতু সারণি ঘরের সামগ্রীর উচ্চতা পরিবর্তনশীল, তাই নোটিশ ডিআইভি সর্বদা ঘরের নীচে থাকে না। যদি কোনও টেবিল সেল p০px চিহ্নিতকারীর বাইরে প্রসারিত হয়, তবে অন্য কোষগুলির কোনওটিই না করে, তবে অন্যান্য কোষগুলিতে নোটিশ ডিআইভি নীচের অংশের পরিবর্তে 60০px নীচে রয়েছে।

Comments

টেবিলটি ব্যবহার করার কোনও কারণ আছে? আমি ধরে নিচ্ছি বাকী টেবিলের সামগ্রীগুলি এই ঘরের সামগ্রীগুলি স্থানান্তরিত করতে চলেছে। যদি টেবিলটি প্রয়োজনীয় হয় আপনি ভালেন = উপরে এবং নীচে ভালেন = নীচে দুটি সারি শীর্ষ ব্যবহার করতে পারেন

— ওয়েন

আপনি যদি বিন্যাসের উদ্দেশ্যে টেবিলগুলি ব্যবহার করেন তবে আমি তার বিরুদ্ধে পরামর্শ দেব। ডেটা দেখানোর জন্য সারণী ব্যবহার করা ভাল, তবে সেগুলি বিন্যাসের জন্য সেরা নয়।

— কাইল

এটি একটি ক্যালেন্ডারের জন্য ... সুতরাং একটি টেবিল গ্রিড অপরিহার্য: 8wayrun.com/events/monthly/1.2011

— জেসন

Answer 1

এটি কারণ সিএসএস ২.১ অনুসারে , position: relativeটেবিল উপাদানগুলির প্রভাব অপরিজ্ঞাত। এই অর্থবোধক, position: relativeক্রোম 13 পছন্দসই প্রভাব রয়েছে, কিন্তু না ফায়ারফক্সে 4. এখানে করা আপনার সমাধান যোগ হয় divআপনার বিষয়বস্তু প্রায় এবং করা position: relativeযে divপরিবর্তে td। নীচে আপনি position: relative(1) সাথে divভাল (1) দিয়ে (2) এ td(ভাল নয়) এবং শেষ পর্যন্ত (3) একটি divঅভ্যন্তরে একটি td(আবার ভাল) এর সাথে প্রাপ্ত ফলাফলগুলি চিত্রিত করে ।

<table>
  <tr>
    <td>
      <div style="position:relative;">
        <span style="position:absolute; left:150px;">
          Absolute span
        </span>
        Relative div
      </div>
    </td>
  </tr>
</table>

Comments

ডিভ উচ্চতা 100% হবে না, সুতরাং নীচে আপেক্ষিক অবস্থান: 0 এর কোনও প্রভাব নেই।

— সফটলিয়ন

মনে রাখবেন যে এই উদাহরণের "পরম স্প্যান" টিডি উচ্চতার উপর প্রভাব ফেলবে না যা মূলত টেবিলের ব্যবহারকে অকেজো করে তোলে।

— ভয়ঙ্কর

@ সফ্টলিওন: টিডি থেকে ডিভিডে যে কোনও প্যাডিং লাগিয়ে সেট করে সেট করুন এবং এর tdভিতরে পুরো কন্টেন্টটি মোড়ানো সম্পর্কে কীভাবে ? ধারণাটি হ'ল উপরের উপরে একটি পাতলা সমন্বিত স্তর তৈরি করা , যা নিজের মতো কাজ করে তবে এটি একটি । এটা আমার জন্য কাজ করে। divwidth: 100%height: 100%relativetdtddiv

— ক্যামিলবি

এইচটিএমএল উত্সের জন্য লিঙ্কটি মারা গেছে। আপনি কি তা আপডেট / রিফ্রেশ করতে পারেন?

— পিটার ভারাগা

যারা এই উত্তরটি 2019 বা এর পরে খুঁজে পান: CSS2.1 সত্যিই বলেছিল যে position:relativeঅভ্যন্তরীণ টেবিলের অংশগুলির প্রভাব অপরিবর্তিত ছিল, এটি নিজেরাই টেবিলের অংশগুলির আচরণ বোঝায় (উদাহরণস্বরূপ, এটি সীমারেখা কীভাবে tdআচরণ করবে তা স্পষ্ট নয়) যদি এটির মাধ্যমে স্থানান্তরিত position:relativeহয় border-collapse:collapse)। এটি একেবারে অবস্থিত বংশধরদের ব্লকযুক্ত সম্ভাব্য ব্লক থেকে তাদের বাদ দেয়নি । সুতরাং ফায়ারফক্সের আচরণটি কেবল একটি বাগ হিসাবে দেখা গেল, যা ২০১৪ সালে স্থির হয়েছিল।

— ইলিয়া স্ট্রেলটসিন

Answer 2

এই কৌশলটিও উপযুক্ত, তবে এক্ষেত্রে বৈশিষ্ট্যগুলি প্রান্তিককরণ (মাঝারি, নীচে ইত্যাদি) কাজ করবে না।

<td style="display: block; position: relative;">
</td>

Answer 3

সারণী ঘরের উপাদানসমূহ, পরিবর্তনশীল উচ্চতা, 60px এর বেশি হতে পারে;

<div style="position: absolute; bottom: 0px;">
    Notice
</div>

Answer 4

আপনার দ্বিতীয় প্রসঙ্গে শ্রদ্ধার সাথে আপনি কি উল্লম্ব সারিবদ্ধ ব্যবহার করে চেষ্টা করেছেন? উভয় ক্ষেত্রেই

<td valign="bottom">

বা সিএসএস সহ

vertical-align:bottom

Comments

এটি কাজ করবে না ... যদি আমি এটি করি, তবে টেবিল ঘরের সামগ্রীগুলি নীচ থেকে 60px ফাঁক করা হবে; পরিবর্তে শীর্ষে।

— জেসন এক্সেলরড

Answer 5

আপনি যদি "প্রদর্শন: ব্লক" করেন তবে এটিও কাজ করে টিডি তে, টিডি পরিচয় নষ্ট করছে, কিন্তু কাজ করে!