সিএসএস: আমি কীভাবে একটি টেবিলের মধ্যে সারিগুলির মধ্যে একটি ফাঁক তৈরি করতে পারি?

Question

ফলাফল টেবিলকে এর চেয়ে কম দেখানো বোঝানো:

[=== রো ===]
[=== রো ===]
[=== রো ===]
[=== রো ===]

... এবং আরও এর মতো:

[=== রো ===]

[=== রো ===]

[=== রো ===]

[=== রো ===]

আমি যোগ করার চেষ্টা করেছি

margin-bottom:1em;

উভয়ই টিডি এবং ট্রায় কিন্তু কিছুই পেল না। কোন ধারনা?

Comments

সেলস্পেসিং এবং সেলপ্যাডিং কেন নয়?

— অ্যাডটাপোস্ট

সেলস্প্যাকিং কলামগুলির মধ্যেও ব্যবধান দেবে।

— রাহুল

সেলস্পেসিং এবং সেলপ্যাডিং বৈধ নয় (এক্স) এইচটিএমএল। আপনি তাদের ব্যবহার করা উচিত নয়।

— freiksenet

@ ফ্রেইকসেনেট: আপনি ভুল বলেছেন। এগুলি পুরোপুরি বৈধ কড়া HTML4 ( w3.org/TR/html401/struct/tables.html#h-11.2.1 ), এক্সএইচটিএমএল 1 ( w3.org/TR/xhtml1/DTD/xhtml1-stict.dtd ) এবং এমনকি এক্সএইচটিএমএল 1 .1 ( w3.org/MarkUp/DTD/xhtml-table-1.mod )।

— মার্টেটর

কোনও টেবিলে দুটি সারির মধ্যে স্পেসের

— ক্লার্ক

Answer 1

যা তোমার দরকার:

table {
    border-collapse: separate;
    border-spacing: 0 1em;
}

এটি ধরে নিয়েছে যে আপনি 1 মি লম্বালম্বী ফাঁক চান, এবং কোনও অনুভূমিক ফাঁক নেই। আপনি যদি এটি করছেন তবে আপনার লাইন-উচ্চতা নিয়ন্ত্রণ করাও সম্ভবত আপনার উচিত।

অদ্ভুত বাছাই করুন যে লোকেদের দেওয়া কিছু উত্তর সীমান্ত-পতনকে জড়িত: পতন, যার প্রভাব প্রশ্নটি যা চেয়েছিল তার ঠিক বিপরীত।

Comments

ওহ ঠিক আছে, আমি একটি বিস্তৃত স্পেসিংয়ের জন্য একটি নির্দিষ্ট কলামটি পাওয়ার চেষ্টা করছিলাম তাই এটি টেবিলে প্রয়োগ করার কথা ভাবেনি

— জোনাথন।

এই দ্রবণটি আপনাকে নির্দিষ্ট সারিগুলিতে স্পেসিং বেছে বেছে প্রয়োগ করতে দেয় না।

— ফ্লিম

প্রশ্নটি অনুরোধ করেনি।

— জন হাগল্যান্ড

এটি একটি ভাল ধারণা তবে প্রথম সারির শীর্ষ শূন্যস্থান পূরণ করার জন্য আমাকে এমন এক ভারসাম্য নিয়ে আসতে হয়েছিল যা আমি অনুমান করি না তবে এটি কাজ করে। দিচ্ছি thead, tbody {position: relative; top: -{border-spacing-value} }।

— ফারজাদ ওয়াইজেড

আমি কি বলতে পারি যে আমি তোমাকে ভালোবাসি? হে ভগবান. আপনি সবেমাত্র আমার একটি saved

— নিকসকিজে

Answer 2

table {
    border-collapse: collapse;
}

td {
    padding-top: .5em;
    padding-bottom: .5em;
}

আপনি প্রথম সীমান্ত-পতন সেট না করা থাকলে কক্ষগুলি কোনও কিছুর প্রতিক্রিয়া জানায় না। সেট হয়ে গেলে আপনি টিআর উপাদানগুলিতেও সীমানা যুক্ত করতে পারেন (অন্যান্য জিনিসের মধ্যে))

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

Comments

আপনি এটি পরীক্ষা করেছেন? দেখে মনে হচ্ছে যে টিডি'র কোনও পতন বা বিনা প্যাডিং থাকতে পারে। সীমানা ধসে পড়ে কাজ করে তবে আইই তে নয়।

— কোবি

এটি কাজ করে। বিরক্তিকর যে মার্জিনগুলি কাজ করে না, তবে এই ক্ষেত্রে এটি কোনও বিষয় নয়। ধন্যবাদ

— এমজিওউইন

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

— জন হাগল্যান্ড

এটি সিএসএস 2 এর প্রায় প্রথম অংশ যা বাস্তবায়িত হয়েছিল, কারণ ব্রাউজারগুলির ইতিমধ্যে এইচটিএমএল সংস্করণে টেবিল ফাঁকগুলি প্রয়োগ করা হয়েছিল যা প্রত্যেকে পিক্সেল-নির্ভুল লেআউটের জন্য ব্যবহার করত। হ্যাঁ, আমি নিশ্চিত :)

— জন হাগল্যান্ড

এটি সিএসএসের এমন এক অদ্ভুত কোণার যাঁরা এই স্পেসটি পড়েছেন কেবল তারা ছাড়া কেউই জানেন না। (তাদের মধ্যে একটি আশ্চর্যরকম বড় সংখ্যা রয়েছে Similarly একইভাবে

— ভাসাটি সাধারণত বাস্তবে

Answer 3

যদি অন্য কোনও উত্তর সন্তুষ্ট না হয় তবে আপনি সর্বদা খালি সারি তৈরি করতে এবং স্বচ্ছ হতে সিএসএস দিয়ে উপযুক্ত স্টাইল করতে পারেন।

Comments

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

— ফ্লিম

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

— জন হগল্যান্ড

নকল সারিগুলি এমন সরঞ্জামগুলিকেও বিভ্রান্ত করে যা টেবিল সারিগুলি সারণি সারি হিসাবে প্রত্যাশা করে (যেমন প্রতিবন্ধীদের জন্য গুরুত্বপূর্ণ অ্যাক্সেসিবিলিটি সরঞ্জাম এবং রফতানি / বাছাই / পুনর্নির্মাণ / ইত্যাদির জন্য সাধারণ প্লাগইন)। সাধারণ নিয়ম হিসাবে, জাল স্টাফগুলিকে ঝাঁকুনির পরিবর্তে স্টাইল নিয়ন্ত্রণ করতে স্টাইলগুলি ব্যবহার করার অনেক কারণ রয়েছে। আরও তথ্যের জন্য অর্থপূর্ণ মার্কআপ সম্পর্কে পড়ুন।

— এমজিউইন

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

— Flimm

Answer 4

আপনার যদি সীমানা না থাকে বা সীমানা না থাকে এবং ঘরের ভিতরে ব্যবধান চান তবে আপনি ব্যবহার করতে পারেন padding, বা line-height। যতদূর আমি জানি, কোষ এবং সারিগুলিতে মার্জিনের কোনও প্রভাব নেই।
কক্ষের ব্যবধানের জন্য একটি সিএসএস সম্পত্তি border-spacing, তবে এটি আই 6/7 এ কাজ করে না (যাতে আপনি এটি আপনার ভিড়ের উপর নির্ভর করে ব্যবহার করতে পারেন)।

অন্য সমস্ত কিছু ব্যর্থ হলে আপনি cellspacingনিজের মার্কআপে পুরানো বৈশিষ্ট্যটি ব্যবহার করতে পারেন - তবে এটি আপনাকে কলামগুলির মধ্যে ব্যবধানও দেবে। কিছু সিএসএস পুনরায় সেট করার পরামর্শ দেয় যে ক্রস ব্রাউজার সমর্থন পেতে আপনার যেকোন উপায়ে সেট করা উচিত:

/ * সারণীগুলি এখনও cellspacing="0"মার্কআপে প্রয়োজন * /

Answer 5

এটিই উপায় (আমি ভাবছিলাম এটি অসম্ভব):

প্রথমে টেবিলটিকে কেবল উল্লম্ব সীমানা-ব্যবধান দিন (উদাহরণস্বরূপ 5px) এবং এটি অনুভূমিক বর্ডার-স্পেসিং 0 এ সেট করুন Then তারপরে আপনার প্রতিটি সারির ঘরে যথাযথ সীমানা দেওয়া উচিত। উদাহরণস্বরূপ, প্রতিটি সারিতে ডান-সর্বাধিক কক্ষের উপরে, নীচে এবং ডানদিকে সীমানা থাকা উচিত। বাম-সর্বাধিক কক্ষগুলির উপরে, নীচে এবং বামে সীমানা থাকা উচিত। এবং এই 2 এর মধ্যে অন্যান্য কক্ষগুলির কেবল উপরের এবং নীচে সীমানা থাকা উচিত। এই উদাহরণটি পছন্দ করুন:

<table style="border-spacing:0 5px; color:black">
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
    <tr>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-left:thin black solid;">left-most cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid;">other cell</td>
        <td style="border-bottom:thin black solid; border-top:thin black solid; border-right:thin black solid;">right-most cell</td>
    </tr>
</table>

Answer 6

আমার মতে, সবচেয়ে সহজ উপায় হ'ল আপনার ট্যাগে প্যাডিং যুক্ত।

td {
 padding: 10px 0
}

আশা করি এটা তোমাকে সাহায্য করবে! উল্লাস!

Comments

এটি টেবিল সারির ভিতরে অতিরিক্ত স্থান তৈরি করে। টেবিলের সারিগুলিতে এমন রঙ রয়েছে যা দেখতে ভাল লাগবে না।

— কোকোডোকো

Answer 7

সহজভাবে আপনি padding-topএবং padding-bottomএকটি tdউপাদান ব্যবহার করতে পারেন ।

ইউনিট এই তালিকা থেকে কিছু করতে পারে:

ডেমো কোড:

td
{
  padding-top: 10px;
  padding-bottom: 10px;
}

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Answer 8

টিডি তে প্যাডিং কাজ করে যদি আপনি স্থানটি টিডির মতো একই পটভূমির রঙ চান want

আমার ক্ষেত্রে, শিরোনাম সারি এবং এটির উপরে যা কিছু ছিল তার মাঝে সাদা স্থানের প্রয়োজন ছিল

এই স্টাইলিংটিকে একটি একক কক্ষে প্রয়োগ করে, আমি পছন্দসই বিভাজন পেতে সক্ষম হয়েছি। এটি সমস্ত কোষে যুক্ত করার প্রয়োজন ছিল না ... তাত্পর্যপূর্ণভাবে সবচেয়ে মার্জিত নয়, তবে সম্ভবত বিভাজক সারিগুলির চেয়ে আরও মার্জিত।

<td colspan="10"> 
    <div class="HeaderRow" 
         style="margin-top:10px;">
            <%# Eval("VendorName")%>
     </div>
</td>  

Answer 9

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

এই জটিলতা এড়াতে আপনি ডিভ ব্যবহার করতে পারেন। প্রতিটি ডিভের জন্য কেবল একটি মার্জিন দিন।

Comments

টেবিলগুলি ব্যবহার করার জন্য এখনও ভাল কারণ রয়েছে (যেমন ট্যাবুলার ডেটা)। আপনি ঠিক বলেছেন, খালি সারি অবশ্যই একটি নির্বোধ রুট: পি কিন্তু এর সমাধান রয়েছে, সীমান্ত-পতন।

— রায়ান ফ্লোরেন্স

Answer 10

আপনি CSS ব্যবহার করে প্রতিটি সারিটির উচ্চতাও সংশোধন করতে পারেন।

<head>
 <style>
 tr {
   height:40px;
 }
</style>
</head>

<body>
<table>

<tr> <td>One</td> <td>Two</td> </tr>
<tr> <td>Three</td> <td>Four</td> </tr>
<tr> <td>Five</td> <td>Six</td> </tr>

</table>
</body>

আপনি <td>উপাদানটির উচ্চতাও পরিবর্তন করতে পারেন , এটি আপনাকে একই ফলাফল দেয়।

Answer 11

<tr>ঠিক নীচে অন্য একটি তৈরি করুন এবং এর সামগ্রীতে কিছু জায়গা বা উচ্চতা যুক্ত করুন<td>

উদাহরণস্বরূপ ভাণ্ডারটি চেকআউট করুন

https://jsfiddle.net/jd_dev777/wx63norf/9/

Comments

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

— এমজিউইন

@ এমজিও আপনার পরামর্শের জন্য ধন্যবাদ। সম্পূর্ণ সম্মত

— জয়দীপ চৌহান

Answer 12

টিআরটিতে নিম্নলিখিত নিয়ম যুক্ত করুন এবং এটি কাজ করা উচিত

float: left

নমুনা (আইই 9 অফকোর্সে এটি খুলুন :)): http://jsfiddle.net/zshmN/

সম্পাদনা: এটি একটি আইনী বা সঠিক সমাধান নয় যেমন অনেকের নির্দেশিত, তবে যদি আপনার কোনও বিকল্প না থাকে এবং কিছু প্রয়োজন হয় এটি IE9 এ কাজ করবে।

সুতরাং যারা ভোট দিচ্ছেন তারা সবাই, দয়া করে আমাদের সঠিক সমাধানটিও জানতে দিন

Comments

এই পদ্ধতির কলামগুলির স্বয়ংক্রিয় আস্তরণের প্রতিরোধ করে যখন কক্ষগুলিতে বিভিন্ন মাত্রার সাথে ডেটা থাকে - টেবিলের চিহ্নটি আপাতত অর্থহীন। প্রদত্ত উদাহরণগুলিতে এটি যথেষ্ট ভাল কাজ করে তবে এটি কোনও পরামর্শদায়ক কৌশল নয়। আমার অর্থ কী তা বোঝার জন্য কোনও কক্ষের পাঠ্য পরিবর্তন করুন।

— সত্যবাদিতা

আরে @ বিরিজম, দুঃখিত তবে আমি আপনার বক্তব্য পেলাম না। আপনি কি আরও কিছুটা ব্যাখ্যা করতে পারেন? অথবা আপনি যদি এমন কোনও ফিডল সরবরাহ করতে পারেন যেখানে এই পদ্ধতিটি ব্যর্থ হওয়ায় আমি এই পদ্ধতিটি ব্যাপকভাবে ব্যবহার করছি এবং যেখানে এটি ব্যর্থ হয় সেখানকার পরিস্থিতিগুলি যত্ন নিতে চাই।

— সন্দীপ চৌধুরী চৌধুরী

কলামগুলির সুস্পষ্ট চিত্রায়ন নেই; যার অর্থ ট্যাবুলার ডেটা তার চাক্ষুষ কাঠামো হারিয়ে ফেলে এবং পড়তে আরও শক্ত হয়ে যায়। jsfiddle.net/verism/zshmN/5

— verism

@ ভারিজম ইয়া এটি একটি সমস্যা তবে আমরা প্রস্থের কলামগুলি স্থির করতে পারি। আমি জানি এটি একটি ভাল সমাধান নয়, তবে আমি অন্য কোনও সমাধান খুঁজে পাইনি যা আই 9-তে কাজ করে

— সন্দীপ চৌধুরী চৌধুরী

সিএসএসের স্পেসিফিকেশন অনুসারে ভাসমান টেবিল সারিগুলি আইনী নয়। CSS2 সেকশনের 17 টিতে এটির প্রয়োজন: টেবিল-সারি উপাদানগুলি প্রদর্শনের মধ্যে থাকবে: টেবিল-সারি-গোষ্ঠী, শিরোনাম-গোষ্ঠী, বা-ফুটার-গ্রুপ উপাদান। তবে, বিভাগ 9 অনুযায়ী ভাসমান অ্যালগরিদম একটি বেনামি ব্লক প্যারেন্টকে ইনজেকশন দেয়। এর অর্থ হ'ল টেবিলের সারিটির আর কোনও আইনি প্যারেন্ট লেআউট নেই এবং ব্রাউজারটি কী করবে তা অনুমান করছে। এটি ফ্ল্যাট আউট ভুল।

— জন হাগল্যান্ড 20