টিডি প্রস্থ, কাজ করছেন না?

Question

সুতরাং আমি এখানে এই কোড আছে:

<table>
    <tr>
        <td width="200px" valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td width="1000px" valign="top">Content</td>
    </tr>
</table>

সিএসএস সহ

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

এটি আমার ব্রাউজারে দুর্দান্ত কাজ করে এবং আমি এটি প্রতিটি ব্রাউজারে ম্যাক এবং পিসি উভয়ই পরীক্ষা করে দেখেছি, তবে কেউ অভিযোগ করছেন যে ২০০ এর tdসাথে widthপ্রস্থ পরিবর্তন করে। তিনি কী বলছেন তা আমার কোনও ধারণা নেই। কেউ কি জানেন যে তিনি কেন তার প্রস্থের পরিবর্তনগুলি দেখছেন td?

Comments

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

— Jukka K. Korpela

Answer 1

এটা করা উচিত:

<td width="200">

বা

<td style="width: 200px">

মনে রাখবেন যে আপনার ঘরে যদি এমন কিছু সামগ্রী থাকে যা 200px (পছন্দ somelongwordwithoutanyspaces) এর সাথে খাপ খায় না, ততক্ষণে সেলটি প্রসারিত হবে, যদি না আপনার সিএসএসে table-layout: fixedটেবিলটি থাকে।

সম্পাদনা

ক্রিস্টিনা শিশুরা যেমন তার উত্তরে উল্লেখ করেছে, আপনার widthবৈশিষ্ট্যটি এবং ইনলাইন সিএসএস ( styleবৈশিষ্ট্য সহ) ব্যবহার করা উভয়ই এড়ানো উচিত । যথাসম্ভব স্টাইল এবং কাঠামো আলাদা করা এটি একটি ভাল অনুশীলন।

Comments

ধন্যবাদ বাফভেরেটো ... এখনই চেষ্টা করে

— দেখছি

টেবিলটি হওয়া উচিত<table style="table-layout:fixed;">

— user979331

@ ব্যবহারকারী 1193385, হ্যাঁ, এটিই। তবে সম্ভব হলে ইনলাইন সিএসএস ব্যবহার এড়িয়ে চলুন।

— bfavareto

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

— ক্রিস্টিনা

@ ক্রিস্টিনাচিল্ডস আমি সম্মত আমি আমার উদাহরণটিতে ইনলাইন সিএসএস ব্যবহার করেছি যাতে আমার এইচটিএমএল এবং সিএসএসের জন্য দুটি কোড ব্লকে বিভক্ত হওয়ার দরকার পড়ে না। ওপিকে ইনলাইন সিএসএস এড়াতে বলার জন্য উপরে একটি মন্তব্য যুক্ত করা হয়েছে। প্রস্থের বৈশিষ্ট্য সম্পর্কে, প্রযুক্তিগতভাবে এটি হ্রাস করা হয়নি (যেহেতু এইচটিএমএল 5 স্পাই এখনও একটি কার্যকরী খসড়া), তবে আপনি ঠিক বলেছেন এটি এড়ানো উচিত। আমি সে সম্পর্কে একটি নোট দিয়ে আমার উত্তর সম্পাদনা করব।

— bfavareto

Answer 2

টেবিলগুলির প্রস্থ এবং / বা উচ্চতা আর মান নয়; যেমন ইয়ানজ বলেছেন, এগুলি অবজ্ঞাত। পরিবর্তে এটি করার সর্বোত্তম উপায়টি হ'ল আপনার টেবিল ঘরের ভিতরে একটি ব্লক উপাদান রয়েছে যা আপনার পছন্দসই আকারে ঘরটি আটকে রাখবে:

<table>
    <tr>
        <td valign="top">
            <div class="left_menu">
                <div class="menu_item">
                    <a href="#">Home</a>
                </div>
            </div>
        </td>
        <td valign="top" class="content">Content</td>
    </tr>
</table>

সিএসএস

.content {
    width: 1000px;
}

.left_menu {
    background: none repeat scroll 0 0 #333333;
    border-radius: 5px 5px 5px 5px;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    width: 200px;
}

.menu_item {
    background: none repeat scroll 0 0 #CCCCCC;
    border-bottom: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    border-top: 1px solid #FFFFCC;
    cursor: pointer;
    padding: 5px;
}

Comments

দুর্ভাগ্যক্রমে, ইমেল প্রযুক্তি বর্তমান এইচটিএমএল অনুমানের অনেক বছর পিছনে রয়েছে এবং সেক্ষেত্রে সারণী এবং ইনলাইন সিএসএস দুঃখজনকভাবে, অনিবার্য।

— মাইক দ্য লিয়র

কেউ এইচটিএমএল ইমেল সম্পর্কে কথা বলছিল না, এটি ছিল বেসিক ডেস্কটপ ওয়েব ব্রাউজিংয়ের জন্য। তবে হ্যাঁ, ইমেলগুলির জন্য টেবিল এবং ইনলাইন সিএসএস এগুলি তৈরির একমাত্র উপায়। ধন্যবাদ, মাইক্রোসফ্ট ...

— ক্রিস্টিনা

আমি কেবল ইমেল এনেছি কারণ এটাই আমাকে এখানে এনেছে; আমি ইমেলের মাধ্যমে এই একই সমস্যা ছিল।

— মাইক দ্য লাইয়ার

Answer 3

 <table style="table-layout:fixed;">

এটি স্টাইলযুক্ত প্রস্থকে বাধ্য করবে <td>। যদি পাঠ্যটি এটি পূরণ করে তবে এটি অন্য <td>পাঠ্যকে ওভারল্যাপ করবে । সুতরাং মিডিয়া প্রশ্নগুলি ব্যবহার করে দেখুন।

Comments

আমার ব্যবহারের ক্ষেত্রে, এটি bfavareto এর উত্তর হিসাবে গুরুত্বপূর্ণ ছিল

— brasofilo

আমার ক্ষেত্রে (ফায়ারফক্স 70.0) table-layout:fixedকলামগুলিতে নির্দিষ্ট প্রস্থ নির্ধারিত হয়েছে, তাই আমি widthআর (jquery সহ) পরিবর্তন করতে পারি না ।

— হোসে ম্যানুয়েল অ্যাবারকা রদ্রিগেজ

Answer 4

আপনি কোনও টেবিলের width/ heightবৈশিষ্ট্যে ইউনিট নির্দিষ্ট করতে পারবেন না ; এগুলি সর্বদা পিক্সেলগুলিতে থাকে তবে এগুলি হ্রাসের পরে আপনার এগুলি ব্যবহার করা উচিত নয়।

Answer 5

আপনি "টেবিল-বিন্যাস: স্থির;" চেষ্টা করতে পারেন আপনার টেবিলে

table-layout: fixed;
width: 150px;

150px বা আপনার পছন্দসই প্রস্থ।

তথ্যসূত্র: https://css-tricks.com/fixing-tables-long-strings/

Answer 6

আপনি <td>ট্যাগ CSS এর মধ্যে ব্যবহার করতে পারেন :display:inline-block

পছন্দ: <td style="display:inline-block">

Answer 7

ব্যবহার করার চেষ্টা করুন

word-wrap: break-word;

এই সাহায্য আশা করি

Answer 8

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

word-break: break-all;

Answer 9

আমি ব্যবহার করি

<td nowrap="nowrap">

মোড়ক প্রতিরোধে রেফারেন্স: https://www.w3schools.com/tags/att_td_nowrap.asp

Comments

"<td> এর নওর্যাপ বৈশিষ্ট্যটি HTML5 তে সমর্থিত নয় supported পরিবর্তে সিএসএস ব্যবহার করুন।"

— লোফিল্ড থিওরি

Answer 10

নোট করুন যে থ্যাডে একটি কলামের প্রস্থ সামঞ্জস্য করা পুরো টেবিলকে প্রভাবিত করবে

<table>
    <thead>
        <tr width="25">
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tr>
        <td>Joe</td>
        <td>[e-mail]</td>
    </tr>
</table>

আমার ক্ষেত্রে, থ্যাড> টিআর এর প্রস্থটি টেবিল> ট্রেন> টিডিতে প্রস্থকে ওভাররাইড করছে।

Answer 11

ব্যবহার

<table style="table-layout:fixed;">

এটি সারণিকে 100% প্রস্থে সেট করতে বাধ্য করবে hen তারপরে এই কোডটি ব্যবহার করুন

$('#dataTable').dataTable( {
        bAutoWidth: false, 
        aoColumns : [
          { sWidth: '45%' },
          { sWidth: '45%' },
          { sWidth: '10%' },
              ]
      });

(সারণী আইডি ডেটা টেবিলযুক্ত এবং 3 টি কলাম রয়েছে) প্রতিটি কক্ষের দৈর্ঘ্য নির্দিষ্ট করতে

Answer 12

আমি অনেকগুলি সমাধান দিয়ে চেষ্টা করেছি তবে এটি আমার পক্ষে কার্যকর হয়নি তাই আমি টেবিলটির সাথে নমনীয় চেষ্টা করেছি এবং এটি আমার পক্ষে সীমানা-ধসের মতো সমস্ত টেবিল কার্যকারিতা সহ ভাল কাজ করেছে এবং কেবলমাত্র পরিবর্তনটিই প্রদর্শন সম্পত্তি হ'ল

এটি আমার এইচটিএমএল প্রয়োজনীয়তা ছিল

<table>
  <thead>
    <tr>
      <th>1</th>
      <th colspan="3">2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td colspan="3">2</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td colspan="2">3</td>
    </tr>
  </tbody>
</table>

আমার সিএসএস

table{
    display: flex;
  flex-direction: column;
}
table tr{
    display: flex;
  width: 100%;
}
table > thead > tr > th:first-child{
    width: 20%;
}
table > thead > tr > th:last-child{
    width: 80%;
}
table > tbody tr > td:first-child{
    width: 10%;
}
table > tbody tr > td{
    width: 30%;
}
table > tbody tr > td[colspan="2"]{
    width: 60%;
}
table > tbody tr > td[colspan="3"]{
    width: 90%;
}
/*This is to remove border making 1px space on right*/
table > tbody tr > td:last-child{
    border-right: 0;
}

Answer 13

এই সমস্যাটি বেশ সহজেই সিএসএস নিয়মের সাহায্যে min-widthএবং সমাধান করা যায় max-width।

এইচটিএমএল

<table>
  <tr>
    <td class="name">Peter</td>
    <td class="hobby">Photography</td>
    <td class="comment">A long comment about something...</td>
  </td>
</table>

সিএসএস

.name {
  max-width: 80px;
  min-width: 80px;
}

এটি প্রথম কলামটি 80px প্রশস্ত করতে বাধ্য করবে। সাধারণত আমি পাঠ্যটিতে রাজত্ব করতে সর্বনিম্ন প্রস্থ ছাড়াই সর্বাধিক প্রস্থ ব্যবহার করি যা মাঝে মধ্যে খালি একটি সুপার প্রশস্ত কলামযুক্ত একটি টেবিল তৈরি করা থেকে খুব বেশি দীর্ঘ। ওপির প্রশ্নটি একটি নির্দিষ্ট প্রস্থে স্থাপনের বিষয়ে ছিল, সুতরাং উভয়ই একসাথে নিয়ম করে। সিএসএসে অনেক ব্রাউজারে width:80px;টেবিল কলামগুলির জন্য উপেক্ষা করা হয়। এইচটিএমএলের মধ্যে প্রস্থ নির্ধারণ কাজ করে, তবে আপনার জিনিসগুলি করা উপায় নয়।

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

যদি আমি পাঠ্যটি মোড়ানো থেকে শুরু করে একটি সারির উচ্চতা বাড়িয়ে রাখতে চাই - তবে এখনও কোনও ব্যবহারকারীর পক্ষে সম্পূর্ণ পাঠ্যটি দেখা সম্ভব করে তোলে, আমি white-space: nowrap;মূল নিয়মে ব্যবহার করি , তারপরে একটি হোভার বিধি প্রয়োগ করুন যা প্রস্থটি সরিয়ে দেয় এবং নর্যাপের নিয়মগুলি যাতে ব্যবহারকারীরা যখন তাদের উপরের উপরের মাউসটি নিয়ে থাকে তখন সম্পূর্ণ সামগ্রীটি দেখতে পারে। এটার মতো কিছু:

সিএসএস

.name {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
}
.name:hover {
  max-width: none;
  white-space: normal;
  overflow:auto;
}

এটি ঠিক আপনি কী অর্জন করতে চাইছেন তার উপর নির্ভর করে। আমি আশা করি এটা কারো সাহায্যে লাগবে. পিএস একদিকে যেমন, আইওএসের জন্য হোভার কাজ না করার জন্য একটি স্থিরতা রয়েছে - দেখুন সিএসএস হভার আইওএসে কাজ করছে না সাফারি এবং ক্রোম