ডিভের বাইরে টেবিল উপচে পড়া

Question

আমি এমন একটি টেবিলটি থামানোর চেষ্টা করছি যা এর পিতামাতার বাইরে প্রবাহিত থেকে প্রস্থে স্পষ্টভাবে ঘোষণা করা হয়েছে div। আমি অনুমান করি যে আমি এটি ব্যবহার করে কোনওভাবে এটি করতে পারি max-widthতবে আমি এই কাজটি করবো বলে মনে হয় না।

নিম্নলিখিত কোড (খুব ছোট উইন্ডো সহ) এর কারণ ঘটবে:

<style type="text/css">
  #middlecol {
    width: 45%;
    border-right:2px solid red;
  }
  #middlecol table {
    max-width:100% !important;
  }
</style>

<div id="middlecol">
  <center>
    <table width="400" cellpadding="3" cellspacing="0" border="0" align="center">
      <tr>
        <td bgcolor="#DDFFFF" align="center" colspan="2">
          <strong>Notification!</strong>
        </td>
      <tr>
        <td width="50">
          <img src="http://www.example.com/img.png" width="50" height="50" alt="" border="0">
        </td>
        <td>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </td>
      </tr>
    </table>
  </center>
 </div>

লাল লাইনটি হ'ল ডান সীমানা divএবং আপনি যদি নিজের ব্রাউজার উইন্ডোটিকে ছোট করেন তবে দেখতে পাবেন যে টেবিলটি এতে খাপ খায় না।

Comments

অফ-টপিক: ব্যবহার করবেন না <center>। এটি বছরের পর বছর ধরে অবহেলা করা হয়েছে। এছাড়াও, align="center"আপনার টেবিলটিতে ইতিমধ্যে একটি রয়েছে।

— gegDwight

এটি দুর্ভাগ্যজনকভাবে এমন কিছু যা আমার নিয়ন্ত্রণ করতে পারে না। ডিভের ভিতরে থাকা সামগ্রীটি আসলে আমার দ্বারা উত্পন্ন নয় এমন কোনও ফাইল থেকে অন্তর্ভুক্ত। আমি কেবল সিএসএসকেই স্পর্শ করতে পারি তবে আমি যদি করতে পারতাম তবে <<<

— waiwai933

Answer 1

এটি করে ঘুরিয়ে দিন:

<style type="text/css">
  #middlecol {
    border-right: 2px solid red;
    width: 45%;
  }

  #middlecol table {
    max-width: 400px;
    width: 100% !important;
  }
</style>

এছাড়াও আমি আপনাকে পরামর্শ দিতে হবে:

• centerট্যাগটি ব্যবহার করবেন না (এটি অবনতিযুক্ত)
• সিএসএস ( এবং ) দ্বারা সেগুলি সেট width, ব্যবহার , bgcolorবৈশিষ্ট্যগুলি ব্যবহার করবেন নাwidthbackground-color

(ধরে নিলাম যে আপনি যে সারণী রেন্ডার করেছিলেন তা নিয়ন্ত্রণ করতে পারবেন)

Comments

আমি যদি প্রস্থ তৈরি করি: 100% এটি আমার মার্জিনটিকে উপেক্ষা করে: ডান। যার ফলে অনুভূমিক বার স্ক্রোলিং হয়

— জেসি

Answer 2

আপনি টেবিলগুলি ব্যবহার করে তাদের পিতামাতার দ্বি ছাড়িয়ে যেতে প্রসারিত করতে বাধা দিতে পারেন table-layout:fixed।

নীচের সিএসএস আপনার টেবিলগুলি চারপাশের ডিভের প্রস্থে প্রসারিত করবে।

table 
{
    table-layout:fixed;
    width:100%;
}

আমি এই কৌশল এখানে পেয়েছি ।

Comments

এটি সমস্ত কলামকে একই প্রস্থ হতে বাধ্য করে ... খুব দরকারী নয়

— সেরজ সাগান

প্রকৃতপক্ষে আপনি কলামগুলি এখনও পৃথক প্রস্থে তৈরি করতে পারেন, আপনাকে কেবলমাত্র <col>এস বা প্রথম সারির <td>( প্রস্থে এটি পাঠ্যের আকারের ভিত্তিতে প্রবাহিত করতে দেওয়া) প্রস্থগুলি নির্দিষ্ট করতে হবে। এমডিএন থেকে: "স্থির: টেবিল এবং কলামের প্রস্থগুলি টেবিল এবং কোল উপাদানগুলির প্রস্থ বা কোষের প্রথম সারির প্রস্থ দ্বারা সেট করা হয় subse পরবর্তী সারিতে ঘরগুলি কলামের প্রস্থকে প্রভাবিত করে না।"

— ফিলাফ্রেও

তোমাকে অনেক ধন্যবাদ. এটি আমার জন্য আপনি একটি বড় সাহায্য করেছেন ...

— পার্থান_কোন

Answer 3

চারপাশে একটি অপরিশোধিত কাজ হ'ল display: tableডিভের উপর সেট করা।

Comments

এটি উজ্জ্বল, ঠিক আমি যা খুঁজছিলাম। অন্যদের এখানে কিছু গুগলযোগ্য স্ট্রিংগুলিকে সহায়তা করার জন্য: আমি ওভারফ্লোতে পিতামাতার ডিভ ফিট করার জন্য সিএসএস ব্যবহার করার চেষ্টা করছিলাম বা উপচে পড়া টেবিলের বিষয়বস্তু কভার করার জন্য একটি ব্যাকগ্রাউন্ড ফিট করছি। এটি নিখুঁতভাবে কাজ করেছে, অনেক অনেক ধন্যবাদ!

— ত্রিশ্বেব

কেবলমাত্র একটি সংযোজন, অনুগ্রহ করে প্রাসঙ্গিক যেখানে এটি প্রয়োগ হচ্ছে সেদিকে মনোযোগ দিন, এটি ব্যবহারের মতো টেবিল বিন্যাস প্রদান করতে ব্যবহৃত হয় এবং সেইসাথে সারণী-সারি, টেবিল-ঘর এর মতো অন্যান্য শৈলীর বৈশিষ্ট্যের উপস্থিতি। সারণী বিন্যাসগুলি ভাসমান নয়। সময়ে প্রদর্শন: টেবিলের সম্পত্তি একাই যথেষ্ট নয়

— কোয়েস্টজেন

উত্তরের খোঁড়াখুঁড়ির পরেও এখানে এসেছিল। অনুসন্ধান ইঞ্জিনের জন্য স্ট্রিং: ডিভের অভ্যন্তরে সারণী স্ক্রল করবে না, ফায়ারফক্স। টেবিলের সাথে ডিভ স্ক্রোল করবে না, ফায়ারফক্স। কোনও ডিভের ভিতরে কোনও স্ক্রোলবার সারণী উপস্থিত নেই ing

— 16

আমি কয়েকটি জিনিস চেষ্টা করেছি তবে আমি কেবল প্রদর্শনটি যুক্ত করব: শীর্ষ পিতৃ বিভাগে টেবিল । সমস্যার সমাধান হয়েছে, ধন্যবাদ।

— Günay Gültekin

দীর্ঘ শিরোনামের নাম এবং দীর্ঘ কক্ষের সামগ্রী সহ সারণীগুলির জন্য সেরা সমাধান। ধন্যবাদ!

— এজ বায়ারাক

Answer 4

আমি উপরে উল্লিখিত সমস্ত সমাধান চেষ্টা করেছিলাম, তারপরেও কার্যকর হয়নি। আমি অন্য এক নীচে 3 টেবিল আছে। শেষ ওভার প্রবাহিত। আমি এটি ব্যবহার করে এটি ঠিক করেছি:

/* Grid Definition */
table {
    word-break: break-word;
}

প্রান্ত মোডে আইই 11 এর জন্য আপনাকে এটি সেট করতে হবে word-break:break-all

Answer 5

প্রথমে আমি জেমস লরুকের পদ্ধতিটি ব্যবহার করেছিলাম। এটি তবে এর সমস্ত প্রস্থকে পরিবর্তন করেছে td।

আমার জন্য সমাধানটি white-space: normalকলামগুলিতে ব্যবহার করা ছিল (যা সেট করা হয়েছিল white-space: nowrap)। এইভাবে পাঠ্যটি সর্বদা ভঙ্গ হবে। ব্যবহারের মাধ্যমে word-wrap: break-wordনিশ্চিত করা হবে যে প্রয়োজনের সময় সমস্ত কিছু ভেঙে যাবে, এমনকি কোনও শব্দের মধ্য দিয়েও break

সিএসএস এর পরে দেখতে হবে:

td, th {
    white-space: normal; /* Only needed when it's set differntly somewhere else */
    word-wrap: break-word;
}

এটি সর্বদা আকাঙ্ক্ষিত সমাধান হতে পারে না, কারণ word-wrap: break-wordআপনার টেবিলে থাকা শব্দগুলিকে অবৈধ করে তুলতে পারে। এটি তবে আপনার টেবিলটিকে সঠিক প্রস্থে রাখবে।

Answer 6

আমি উপরের প্রায় সমস্ত চেষ্টা করেছিলাম কিন্তু আমার জন্য কাজ করে নি ... নিম্নলিখিতটি তা করেছে

word-break: break-all;

এটি প্যারেন্ট ডিভিতে যুক্ত করা হবে (টেবিলের ধারক)

Answer 7

overflow-x: auto;
overflow-y : hidden;

উপরের স্টাইলিংটি পিতামাতার ডিভিতে প্রয়োগ করুন।

Answer 8

আপনি এই সিএসএস চেষ্টা করতে পারেন। আমি সবসময় কাজ করে অভিজ্ঞতা অর্জন করেছি।

div {
  border-style: solid;
  padding: 5px;
}

table {
  width: 100%;
  word-break: break-all;
  border-style: solid;
}

<div style="width:200px;">
  <table>
    <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
      <th>Col 4</th>
      <th>Col 5</th>
    </tr>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
      <td>data 4</td>
      <td>data 5</td>
    </tr>
    <table>
</div>

Comments

দয়া করে একাধিক প্রশ্নের একই উত্তর পোস্ট করবেন না। পরিবর্তে কেবল একটি উত্তর দিন, এবং মন্তব্য করুন (বা পতাকা / নিকট ভোট, একবার আপনার সুনাম হয়ে গেলে) অন্যরা সদৃশ হয়ে গেছে। রেফারেন্স জন্য, আমি এই, উল্লেখ করছি stackoverflow.com/a/63741405/2756409 , stackoverflow.com/a/63741355/2756409 এবং stackoverflow.com/a/63741938/2756409

— TylerH

অতিরিক্তভাবে, দয়া করে কেবল এমন উত্তর সরবরাহ করুন যা নতুন কিছু সরবরাহ করে। এই সমাধানটি, word-break: break-wordএখানে ইতিমধ্যে ইতিমধ্যে অনেকগুলি, অনেক উত্তর সরবরাহ করেছেন।

— টাইলারএইচ

@TylerH আপনার পরামর্শের জন্য ধন্যবাদ।

— কানাব পল

Answer 9

width="400"টেবিলে একটি রয়েছে, এটি সরান এবং এটি কাজ করবে ...