টিআরের উচ্চতা কীভাবে ঠিক করবেন?

Question

কোনও টেবিলে একটি সারির (টিআর) উচ্চতা ঠিক করা সম্ভব?

সমস্যাটি উপস্থিত হয় যখন আমি ব্রাউজারের উইন্ডোটি সঙ্কুচিত করি, কিছু সারি চারপাশে খেলতে শুরু করে এবং আমি সারিটির উচ্চতা ঠিক করতে পারি না।

আমি বেশ কয়েকটি উপায়ে চেষ্টা করেছি: tr width="20" / tr style="height:20px" / td height="20" / td style="height:20px"

আমি আই 7 ব্যবহার করছি

শৈলী

.tableContainer{
    color:#0076BF;
    margin: -10px 0px -10px 0px;
    border-spacing: 10px;
    empty-cells:show;
    width:90%;
    text-align:left;
} 

.tableContainer tr td{
    white-space:nowrap;
    text-align:left;
}

এইচটিএমএল কোড।

<table class="tableContainer" cellspacing="10px">
    <tr style="height:15px;">
        <td>NHS Number</td>
        <td>&#160;</td>
        <td>Date of Visit</td>
        <td>&#160;</td>
        <td colspan="3">Care Time Started</td>
        <td>&#160;</td>
        <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td>
        <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>                        care starts</td>
    </tr>
    <tr>
        <td width="90" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="80" class="tableContainerRow2">&#160;</td>
        <td >&#160;</td>
        <td width="40" class="tableContainerRow2">&#160;</td>
        <td  width="5">:</td>
        <td width="40" class="tableContainerRow2">&#160;</td>        
        <td >&#160;</td>
    </tr>
</table>

Answer 1

টেবিলগুলি ifif হয় (কমপক্ষে, আইই তে) যখন উচ্চতা স্থির করার কথা এবং পাঠ্য মোড়ানো না হয়। আমি মনে করি আপনি খুঁজে পাবেন যে একমাত্র সমাধান হ'ল divপাঠকের উপাদানটির ভিতরে রাখাই:

td.container > div {
    width: 100%;
    height: 100%;
    overflow:hidden;
}
td.container {
    height: 20px;
}

<table>
    <tr>
        <td class="container">
            <div>This is a long line of text designed not to wrap 
                 when the container becomes too small.</div>
        </td>
    </tr>
</table>

এইভাবে, divএর উচ্চতাটি ধারণকক্ষের কক্ষের মতো এবং পাঠ্যটি বাড়তে পারে না div, ঘরের / সারিকে একই উচ্চতা রেখে উইন্ডোর আকার যাই হোক না কেন।

Comments

পরামর্শের জন্য ধন্যবাদ, এটি কাজ করছে বলে মনে হচ্ছে তবে এটি কিছুটা অগোছালো দেখাচ্ছে।

— আমড়া

সাহায্যে খুশি :-) দুর্ভাগ্যক্রমে, জঞ্জাল কোডটি হ্যাকস এবং ওয়ার্কআরউন্ডের ক্ষেত্রে সাধারণত হয়।

— অ্যান্ডি ই

আমি [কোড]। কনটেনার {প্রস্থ: 100%; সর্বাধিক উচ্চতা: 40px; যথোপযুক্ত সৃষ্টিকর্তাযথোপযুক্ত সৃষ্টিকর্তা; । [/ কোড] এবং [কোড] <ডি ক্লাস = 'ধারক'> </div> [/ কোড]।

— সিস টিমারম্যান

আমি একই পদ্ধতিটি করেছি, <ডি> ট্যাগের মধ্যে একটি ডিভিও রেখেছি এবং এটি ভালভাবে কাজ করেছে। আমার কাছে কেবল ক্রোমে এই সমস্যাটি ছিল। এফএফক্স, সাফারি এবং আই টেবিল শিরোনামে উচ্চতা সেটকে সমর্থন করে। ভাগ করে নেওয়ার জন্য ধন্যবাদ! :)

— মারিও রডরিগস

সাফারিতে কাজ করে না ... আপনার

— ডিভের উপরও

Answer 2

কোষগুলির মধ্যে একটিতে উচ্চতা স্থাপন করার চেষ্টা করুন:

<table class="tableContainer" cellspacing="10px">
 <tr>
  <td style="height:15px;">NHS Number</td>
  <td>&#160;</td>

তবে নোট করুন যে বিষয়বস্তুর প্রয়োজনের তুলনায় আপনি ঘরটি ছোট করতে সক্ষম হবেন না। সেক্ষেত্রে আপনাকে প্রথমে পাঠ্যটি ছোট করতে হবে।

Comments

আমি নিশ্চিত যে আপনি এইচটিএমএল বৈশিষ্ট্যে "px" ব্যবহার করবেন না।

— ই

আমি নিশ্চিত আপনি স্টাইল অ্যাট্রিবিউট ব্যবহার করতে পারেন।

— বুরাক ডবর

Answer 3

এর সামগ্রীর প্রাকৃতিক উচ্চতার tdচেয়ে কম উচ্চতা সেট করা

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

ঘরগুলির আকার পরিবর্তন করে আমরা সারিটির উচ্চতা নিয়ন্ত্রণ করতে পারি।

ওয়ান ওয়ে এই কাজ করতে, একটি সন্তুষ্ট সেট করতে হয় absoluteমধ্যে অবস্থান relativeসেল, এবং সেট heightসেল, এবং leftএবং topবিষয়বস্তুর।

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
.set-height td {
  position: relative;
  overflow: hidden;
  height: 3em;
}
.set-height p {
  position: absolute;
  margin: 0;
  top: 0;
}
/* table layout fixed */
.layout-fixed {
  table-layout: fixed;
}
/* td width */
.td-width td:first-child {
  width: 33%;
}

<table><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>table-layout: fixed</code> applied:</h3>
<table class="layout-fixed"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>
<h3>With <code>&lt;td&gt; width</code> applied:</h3>
<table class="td-width"><tbody>
  <tr class="set-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td></tr><tr><td>Bar</td><td>Baz</td></tr><tr><td>Qux</td>
    <td>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
  </tr>
</tbody></table>

table-layoutসম্পত্তি

উপরের স্নিপেটের দ্বিতীয় সারণিতে table-layout: fixedপ্রয়োগ হয়েছে, যার ফলে কোষগুলিকে পিতামাতার মধ্যে নির্বিশেষে সমান প্রস্থ দেওয়া উচিত।

ক্যানিউজ ডট কম অনুসারে , table-layout12 ই সেপ্টেম্বর, 2019-তে ব্যবহার সম্পর্কিত কোনও উল্লেখযোগ্য সামঞ্জস্যতার সমস্যা নেই ।

অথবা কেবলমাত্রwidth তৃতীয় সারণীর মতো নির্দিষ্ট কক্ষগুলিতে প্রয়োগ করুন ।

এই পদ্ধতিগুলি কার্যকরভাবে আকারহীন সামগ্রীযুক্ত সেলটিকে position: absoluteকিছু স্বেচ্ছাসেবী ঘের দেওয়ার জন্য প্রয়োগ করে মঞ্জুরি দেয় ।

আরও অনেক সহজভাবে ...

আমার সত্যিই এই বিষয়টি শুরু থেকেই চিন্তা করা উচিত ছিল; আমরা সমস্ত সাধারণ উপায়ে ব্লক স্তরের টেবিল ঘরের সামগ্রীটি পরিচালনা করতে পারি এবং সামগ্রীর প্রাকৃতিক আকারটি সম্পূর্ণরূপে বিনষ্ট না করে position: absoluteআমরা প্রস্থটি কী হওয়া উচিত তা নির্ধারণের জন্য টেবিলটি রেখে যেতে পারি।

table {
  width: 100%;
}
td {
  border: 1px solid #999;
}
table p {
  margin: 0;
}
.cap-height p {
  max-height: 3em;
  overflow: hidden;
}

<table><tbody>
  <tr class="cap-height">
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
    <td>Foo</td>
  </tr>
  <tr class="cap-height">
    <td><p>Bar</p></td>
    <td>Baz</td>
  </tr>
  <tr>
    <td>Qux</td>
    <td><p>Lorem ipsum dolor sit amet, consectetur adipiscing 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td>
  </tr>
</tbody></table>

Comments

অবশেষে একটি উত্তর যে প্রতিশ্রুতিবদ্ধ দেখায়! আমি কাজ করার সাথে সাথে এটি চেষ্টা করব, যদি আমি ভুলে না যাই তবে আমি প্রতিক্রিয়া জানাব।

— jeromej

মোহন মত কাজ! (সতর্কতা যে এটি মুছে ফেলা text-align: centerএবং অন্যান্য কেন্দ্রীকরণ কৌশলগুলি ... যদিও এটি নির্ভর করে position: absolute)

— জেরোমেজ

এটি আমার ক্ষেত্রে উচ্চতার পক্ষে কাজ করে তবে ব্যবহার করার সময় postion: absoluteআমি স্বয়ংক্রিয় ঘরের প্রস্থটি হারাব। সারি উচ্চতার উপর নিয়ন্ত্রণ নেওয়ার সময় টেবিলটি এখনও সঠিকভাবে কক্ষের প্রস্থ গণনা করার কোনও উপায় সন্ধান করার চেষ্টা করছে। কোন চিন্তা?

— ছাই

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

— ফ্রেড গ্যান্ড্ট

ধন্যবাদ ফ্রেড নোট করুন যে কলামগুলিতে একটি নির্দিষ্ট আকার দিতে আমার শিরোনাম (<th>) থাকতে পারে তবে আমি শঙ্কিত শিরোনামগুলি খুব সংকীর্ণ বা খুব প্রশস্ত হতে পারে।

— ছাই

Answer 4

একটি টিডির ভিতরে ডিভ লাগিয়ে দেওয়া আমার পক্ষে কাজ করে।

<table width="100%">
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>

Answer 5

আপনার টেবিলের প্রস্থ 90% যা এর ধারকটির সাথে তুলনামূলক।

আপনি যদি পৃষ্ঠাটি সঙ্কুচিত করেন তবে আপনি সম্ভবত টেবিলের প্রস্থকেও চেঁচাচ্ছেন। কক্ষগুলির প্রস্থ খুব কমিয়ে দেয় এবং ব্রাউজার উচ্চতা বাড়িয়ে ক্ষতিপূরণ দেয়।

উচ্চতাটি অচ্ছুত হওয়ার জন্য, আপনাকে অবশ্যই নিশ্চিত করতে হবে যে ঘরের প্রস্থগুলি অভিযুক্ত সামগ্রী রাখতে পারে। সারণির প্রস্থ ঠিক করা সম্ভবত আপনি চেষ্টা করতে চান এমন কিছু। অথবা সম্ভবত টেবিলের ন্যূনতম প্রস্থের সাথে খেলুন।

Answer 6

আমি যে ফলাফল চেয়েছিলাম তা পেতে আমাকে এটি করতে হয়েছিল:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td>

এটি কেবলমাত্র ঘর বা ডিভের সাথে কাজ করতে অস্বীকৃতি জানায় এবং উভয়েরই প্রয়োজন হয়।

Answer 7

কারণ শব্দটি মোড়ানো হয় এবং নতুন লাইনে চলেছে তাই টিআর প্রসারিত করে। এটি আপনার সমস্যার সমাধান করা উচিত:

overflow:hidden;

এটি টিআর শৈলীতে রাখুন যদিও এটি কাজ করা উচিত তবে কেন এটি কেবল o0 প্রসারিত করা যায় না

পুনশ্চ. আমি এটি পরীক্ষা করেছি তাই এক্সডকে ঘৃণা করবেন না

Comments

ঘৃণা করা নয়, তবে এমএসডিএন.মাইক্রোসফটকম /en-us/library/ms535911(VS.85).aspx এ আইডি তে টিডি উপাদান দ্বারা সমর্থিত শৈলীর একটি তালিকা রয়েছে । overflowতাদের মধ্যে একটি না।

— অ্যান্ডি ই