সিএসএস টিডি প্রস্থের পরম, অবস্থান ব্যবহার করে Using

Question

দয়া করে এই JSFIDDLE দেখুন

td.rhead { width: 300px; }

সিএসএস প্রস্থ কেন কাজ করে না?

<table>
<thead>
<tr>
<td class="rhead">need 300px</td>
<td colspan="7">Week #0</td>
<td colspan="7">Week #1</td>
<!-- etc..-->
</tr>
<tr>
<td class="rhead"></td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<td>S</td><td>M</td><td>T</td><td>W</td><td>T</td><td>F</td><td>S</td>
<!-- etc... -->
</tr>
<thead>
</table>

এছাড়াও, পজিশনের প্রভাবগুলি কী: টিডি প্রস্থগুলিতে যদি স্থির, পরম ইত্যাদি থাকে? আমি একটি স্থির চেয়ে আরও বেশি কারণ খুঁজছি। আমি এটি কিভাবে কাজ করে তা বুঝতে আশা করি।

Comments

display: table-cellসম্মান দেয় না width(একইভাবে এটি কাজ করে না display: inline)। আপনি কী সম্পর্কে জিজ্ঞাসা করছেন তা আমি বুঝতে পারি নাposition fixed|absolute

— বিস্ফোরণ পিলস

@ এক্সপ্লোশনপিলস কারণ আমার আসল কোডে, আমার কাছে টেবিলটি ঠিক করা আছে। আপনি অনুমান করতে পারেন, আমি পৃষ্ঠার শীর্ষে একটি সময়রেখা অর্জন করার চেষ্টা করছি। সুতরাং আমি কেবল অবস্থানে অবস্থানের বৈশিষ্ট্যটি প্রস্থকে প্রভাবিত করি।

— জেক

সিএসএস টেবিল

— টিডি

Answer 1

এটি আপনি যা শুনতে চান তা নাও হতে পারে, তবে display: table-cellপ্রস্থকে সম্মান করে না এবং পুরো টেবিলের প্রস্থের ভিত্তিতে ভেঙে ফেলা হবে। আপনি কেবলমাত্র display: blockটেবিলের ঘরের ভিতরে এমন একটি উপাদান রেখে যার সহজেই প্রস্থটি নির্দিষ্ট করেন, আপনি সহজেই এটি পেতে পারেন

<td><div style="width: 300px;">wide</div></td>

যদি <table>নিজেই position: fixedবা পরম হয় তবে এটি কোষের অবস্থানটি টেবিলের সাথে সম্পর্কিত সমস্ত স্থিতিশীল are

http://jsfiddle.net/ExplosionPIlls/Mkq8L/4/

সম্পাদনা করুন: আমি ক্রেডিট নিতে পারবেন না, কিন্তু মন্তব্য বল যে তুমি শুধু ব্যবহার করতে পারেন min-widthপরিবর্তে widthসারণীর কক্ষে পরিবর্তে।

Comments

+1 - আমি এই কাজের আগে আগে ব্যবহার করেছি। আশ্চর্যের ব্যাপার যে, min-widthউপর TDChrome এবং মুক্তিযোদ্ধা কাজ বলে মনে হচ্ছে না: jsfiddle.net/Mkq8L/7

— টিম Medora স্বাগতম

আসলে, সর্বদা হিসাবে, প্রশ্ন পোস্ট করার পরে, আমি আবিষ্কার করি যে min-width: 300pxকাজ করে! (@ টিমমেডোরা আপনি কয়েক সেকেন্ড দ্রুত ছিলেন!)

— জেক

আমি মনে করি সর্বোত্তম উত্তরটি হল ডিসপ্লে উল্লেখ করে: টেবিল-সেল আচরণ। ধন্যবাদ!

— জেক

এই আচরণটি আমার কাছে উপলব্ধি করে: আপনি যদি একই কলামে দুটি কোষের জন্য দুটি পৃথক প্রস্থ সেট করেন তবে কী হবে? সঙ্গে min-widthসমস্যা নেই যদিও, বৃহত্তম নিতে।

— সিরো সান্তিলি 郝海东 冠状 病 六四 事件 法轮功

এটি একটি হ্যাক, আমি এটি সুপারিশ করি না। সংযুক্ত টিডি প্রস্থ সারণির প্রস্থকে উপচে ফেলেছে। এটাই সমস্যা. আপনার আরও HTML স্ট্রাকচার যুক্ত করে এটি ঠিক করা উচিত নয়।

— ডেভিড

Answer 2

আপনি ব্যবহার করা ভাল table-layout: fixed

অটো ডিফল্ট মান এবং বৃহত টেবিলগুলির সাথে ব্রাউজারটি সমস্ত আকার মাপসই পরীক্ষা করতে এটির পুনরাবৃত্তি করায় কিছুটা ক্লায়েন্ট সাইড লেগের কারণ হতে পারে।

স্থির করা আরও ভাল এবং পৃষ্ঠায় আরও দ্রুত প্রতিস্থাপন করে। টেবিলের কাঠামো টেবিলগুলির সামগ্রিক প্রস্থ এবং প্রতিটি কলামের প্রস্থের উপর নির্ভরশীল।

এখানে এটি আসল উদাহরণটিতে প্রয়োগ করা হয়েছে: জেএসএফআইডিডিএল , আপনি লক্ষ করবেন যে অবশিষ্ট কলামগুলি তাদের সামগ্রীতে চূর্ণবিচূর্ণ এবং ওভারল্যাপ করা হয়েছে are আমরা আরও কয়েকটি সিএসএসের মাধ্যমে এটি ঠিক করতে পারি (আমাকে যা করতে হয়েছিল তা হ'ল প্রথম টিআরতে একটি ক্লাস যুক্ত করা):

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

    .header-row > td {
        width: 100px;
    }

    td.rhead {
        width: 300px
    }

এখানে কর্মক্ষেত্রে দেখা: জেএসএফআইডিডিএল

Answer 3

আপনার প্রদত্ত লিঙ্কটিতে এটি কাজ না করার কারণ হ'ল আপনি প্রতিটি 300 পিএক্স কলাম PLUS 52 কলামগুলি স্প্যান 7 টি কলাম প্রদর্শন করতে চেষ্টা করছেন। কলামগুলির সংখ্যা সঙ্কুচিত করুন এবং এটি কাজ করে। আপনি পর্দায় অনেকগুলি ফিট করতে পারবেন না।

আপনি যদি কলামগুলিকে ফিট করতে বাধ্য করতে চান তবে সেটিংস চেষ্টা করুন:

body {min-width:4150px;}

আমার jsfiddle দেখুন: http://jsfiddle.net/Mkq8L/6/ @ মাইক আমি এখনও মন্তব্য করতে পারছি না।

Comments

টেবিলের প্রস্থের চৌম্বকটি দেহের প্রস্থের সাথে বাড়ার সন্ধান করার জন্য +1।

— জেক

Answer 4

কারণটি হ'ল, কারণ আপনি টেবিলটির প্রস্থ নির্দিষ্ট করেন নি, এবং আপনার সম্পূর্ণ টিডি'র উপচে পড়া over

এটি উদাহরণস্বরূপ , আমি টেবিলটিকে 5000px প্রস্থ দিয়েছি, যা আমি ভেবেছিলাম যে আপনার প্রয়োজনীয়তা মাপসই হবে।

table{
    width:5000px;
}

এটি আপনার সরবরাহ করা ঠিক একই কোড, যা আমি কেবল টেবিলের প্রস্থে যুক্ত করেছি।

আমি বিশ্বাস করি যা ঘটছে, কারণ আপনার টিডি ডিফল্ট টেবিলের প্রস্থকে ছাড়িয়ে গেছে। যা আপনি দেখতে পেলেন, যদি আপনি প্রতিটি টিআর তে আপনার প্রায় 45 টিডি টানেন, (যেমন আপনার প্রশ্নে যে কোডটি সরবরাহ করেছেন, জিসফিল নয়) এটি ঠিক কাজ করে

Comments

একটি টেবিল প্রস্থ থ্রেশহোল্ড আছে উল্লেখ করার জন্য +1। সমস্যাটি হ'ল হাতের আগে আমরা সামগ্রিক প্রস্থটি জানি না। ডিফল্ট টেবিল প্রস্থ কত?

— জেক

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

— তিনি হুই

আমি বিশ্বাস করি আমি এই সমস্যাটি সমাধান করেছি stackoverflow.com/questions/14767459/…

— He Hui

উচ্চতর রেট দেওয়া পরিবর্তে এটিই আসল উত্তর। সামগ্রীর পুরো টেবিলের প্রস্থটি যদি উপচে না পড়ে তবে প্রস্থটি কেবল সেট করা যেতে পারে।

— ডেভিড

Answer 5

এটি কাজ করে দেখুন।

<table>
<thead>
<tr>
<td width="300">need 300px</td>

Comments

কি দারুন! আপনাকে ধন্যবাদ ♥

— ivahidmontazer

এই কোডটি কেন / কীভাবে ওপিকে সহায়তা করে তার দয়া করে কিছু ব্যাখ্যা যুক্ত করুন। এটি ভবিষ্যতের দর্শকদের কাছ থেকে শিখতে পারে এমন একটি উত্তর সরবরাহ করতে সহায়তা করবে। দেখুন এই মেটা প্রশ্ন ও তার উত্তর আরও তথ্যের জন্য।

— হেরেটিক বানর

নোট করুন যে এর প্রস্থের বৈশিষ্ট্যটি HTML5 এ অবচয় করা হয়েছে।

— সিংহমাইলিকো

Answer 6

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

table {
  table-layout: auto;
}

আপনি বুটস্ট্র্যাপ ব্যবহার করেন তাহলে, বর্গ tableহয়েছে table-layout: fixed;ডিফল্টরূপে।

Answer 7

আপনার টেবিলের সারণী-বিন্যাসের সম্পত্তি এবং "স্থির" মান ব্যবহার করুন।

table {
   table-layout: fixed;
   width: 300px; /* your desired width */
}

টেবিলের সম্পূর্ণ প্রস্থ সেট আপ করার পরে, আপনি এখন টিডি এর% এর প্রস্থ সেটআপ করতে পারেন।

td:nth-child(1), td:nth-child(2) {
   width: 15%;  
}

আপনি এই লিঙ্কে এ সম্পর্কে আরও জানতে পারেন: http://www.w3schools.com/cssref/pr_tab_table-layout.asp

Answer 8

আমার উন্মাদ সমাধান।)

$(document).ready(function() {
    $("td").each(function(index) { 
    var htmlText = "<div style='width:300px;'>" + $(this).text() +"</div>";
    $(this).html(htmlText);
  });
});

Answer 9

যদি টেবিলের প্রস্থ উদাহরণস্বরূপ 100% হয়, তবে 20% হিসাবে টিডি তে শতাংশের প্রস্থ ব্যবহার করার চেষ্টা করুন।

Answer 10

ডিভের প্রথম কক্ষ থেকে সামগ্রী মোড়ানো যেমন:

এইচটিএমএল:

<td><div class="rhead">a little space</div></td>

সিএসএস:

.rhead {
  width: 300px;
}

এখানে একটি jsfiddle আছে ।

Answer 11

আপনি এটি ব্যবহার করতে পারেন:

.rhead {
    width:300px;
}

তবে এটি কেবলমাত্র কয়েকটি ব্রাউজারের সাথেই হবে, যদি আমি মনে করি সঠিকভাবে আই 88 এটির অনুমতি দেয় না। সর্বোপরি, কেবলমাত্র width=""বৈশিষ্ট্যটি <td>নিজের মধ্যে রাখা আরও নিরাপদ ।