একটি টেবিলে দুই সারির মধ্যে স্থান?

Question

এটি কি সিএসএসের মাধ্যমে সম্ভব?

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

tr.classname {
  border-spacing: 5em;
}

কোন লাভ নেই। আমি কি কিছু ভুল করছি?

Comments

ব্রাউজারটি কী এবং আপনি কি আপনার কোড (এইচটিএমএল / সিএসএস) স্নিপেট সরবরাহ করতে পারেন?

— প্যাট্রিক দেশজার্ডিনস

ভাল আমি ff3 ব্যবহার করছি হিসাবে আমি জানি যে ie অনুমান নিয়ম সমর্থন করে কিন্তু আপাতত আমি ff3 ঠিক করতে খুঁজছি। আমি ব্যবধান এবং প্যাডিং চেষ্টা করেছিলাম এখন পর্যন্ত কোনও ভাগ্য নেই। productlistingitem হ'ল প্রধান টেবিল <টেবিল শ্রেণি = "productListingItem" সীমানা = "0" সেলপ্যাডিং = "10" সেলস্পেসিং = "0"> <tr> <tr> <টিডি শ্রেণি = "ড্রাগআইটেম">

— মেরিন

হতে পারে কারণ border-spacingএটি একটি গুণাবলী সম্পর্কিত tableএবং না সম্পর্কিত tr। ব্যবহার করে দেখুন table.classname {border-spacing:5em}। Note: আইই 8 সীমান্ত-ফাঁককারী সম্পত্তিটিকে সমর্থন করে যদি একটি!

— বরুণ নটরাজ

যখন সীমানা না থাকে তখন আমি লাইন-উচ্চতা ব্যবহার করি।

— লেয়া

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

— আলেক্সালেজান্দ্রোয়েম

Answer 1

আপনার tdউপাদানগুলিতে প্যাডিং ব্যবহার করা দরকার । এর মতো কিছুতে কৌশলটি করা উচিত। আপনি অবশ্যই নীচের প্যাডিংয়ের পরিবর্তে শীর্ষ প্যাডিং ব্যবহার করে একই ফলাফল পেতে পারেন।

নীচের সিএসএস কোডে, বৃহত্তর চিহ্নটির অর্থ প্যাডিং কেবলমাত্র এমন tdউপাদানগুলিতে প্রয়োগ করা trহয় যা ক্লাসের উপাদানগুলিতে সরাসরি বাচ্চাদের হয় spaceUnder। এটি নেস্টেড টেবিলগুলি ব্যবহার করা সম্ভব করবে। (উদাহরণ কোডে সেল সি এবং ডি।) আমি সরাসরি শিশু বাছাইকারী (ব্র্যান্ড আইআই 6 মনে করি) এর জন্য ব্রাউজার সমর্থন সম্পর্কে খুব বেশি নিশ্চিত নই, তবে এটি কোনও আধুনিক ব্রাউজারে কোডটি ভাঙ্গা উচিত নয়।

/* Apply padding to td elements that are direct children of the tr elements with class spaceUnder. */

tr.spaceUnder>td {
  padding-bottom: 1em;
}

<table>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
    </tr>
    <tr class="spaceUnder">
      <td>C</td>
      <td>D</td>
    </tr>
    <tr>
      <td>E</td>
      <td>F</td>
    </tr>
  </tbody>
</table>

এটি কিছুটা এভাবে রেন্ডার করা উচিত:

+---+---+
| A | B |
+---+---+
| C | D |
|   |   |
+---+---+
| E | F |
+---+---+

Comments

কোড.google.com/p/ie7-js শিশু নির্বাচনকারীকে ie5.5, ie6, আই 7-তে সমর্থন যোগ করেছে

— অ্যান্টনি হ্যাচকিন্স

আপনার সারিগুলির একটি পটভূমির রঙ থাকে এবং আপনি আসলে আপনার সারিগুলির মধ্যে সাদা অংশ চান এমনটি বাদে এটি মোটেও সমস্যার সমাধান করে না।

— সাইমন পূর্ব

@ সিমন: হোয়াইটস্পেস সাধারণত খালি জায়গা বোঝায়, বিশেষত রঙ সাদা নয়। আপনি যদি সারিগুলির মাঝে স্থানটি রঙিন করতে চান তবে আপনি সিডিএস <কোড> সীমান্তের নীচে </ কোড> টিডি-এলিমেন্টের বৈশিষ্ট্য দিয়ে চেষ্টা করতে পারেন। এটি সম্ভবত 1px সীমানার সাথে সঠিকভাবে রেন্ডার করবে। আরেকটি, তবে এত মার্জিত নয়, সমাধানটি হ'ল খালি সারি ব্যবহার করা।

— জান আগারার্ড

@ জান: হ্যাঁ, ঠিক আমার বক্তব্য ... সারিগুলির মধ্যে স্বচ্ছ ফাঁকা জায়গা রাখা বেশ কঠিন । আপনার সমাধানটি কিছু ক্ষেত্রে সহায়তা করে তবে সমস্যাটি সমাধান করে না। খালি টেবিল সারিটি সন্নিবেশ করানো কাজ করতে পারে তবে এটি 'বুদ্ধিমান'। স্বচ্ছতে bottom-borderসেটটিও কাজ করতে পারে তবে ক্রস ব্রাউজার-সামঞ্জস্যপূর্ণ তা আমি নিশ্চিত নই।

— সাইমন পূর্ব

@ সিমন: আপনার ইস্যুতে কোলম্যানের কুরুচিপূর্ণ , তবুও কাজ করার সমাধান রয়েছে ।

— উদ্বিগ্ন

Answer 2

মূল টেবিলে, সেট করার চেষ্টা করুন

border-collapse:separate; 
border-spacing:5em;

সীমান্ত ঘোষণার সাথে সাথে, দেখুন এটি আপনার পছন্দসই প্রভাব অর্জন করে কিনা। তবে সাবধান, আইই "বিচ্ছিন্ন সীমানা" মডেলটিকে সমর্থন করে না।

Comments

হ্যাঁ, এই পদ্ধতিটি আদর্শ হতে পারে, IE 7 ব্যতীত এটি সমর্থন করে না। ব্রাউজার সমর্থনের জন্য, দেখুন: quirksmode.org/css/tables.html

— সাইমন পূর্ব

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

— সাইমন পূর্ব

এটি ক্রোম এবং ফায়ারফক্সের মধ্যে অসঙ্গতিপূর্ণ। আপনার যদি theadএবং এবং tbodyএটি থাকে তবে এটি border-spacingক্রোমে (তবে ফায়ারফক্সের একক) এর মধ্যে দ্বিগুণ রেন্ডার দেবে ।

— ক্যামিলো মার্টিন

এটি হ'ল আসল উত্তর, বিশেষত border-spacing: 0 1emকেবলমাত্র সারিগুলির মধ্যে আপনার স্পেসিং পেতে set

— ইগনোসৌর

@ জিগনোসর আপনি যা বলেছিলেন তা করার চেষ্টা করেছি তবে এটি কেবল প্রথম দুটি নয়, সমস্ত সারিগুলির মধ্যে ব্যবধান জুড়েছে। আপনি কি একটি কাজের jsfiddle প্রদান করতে পারেন?

— ব্যবহারকারী 3281466

Answer 3

আপনার কাছে কোনও ডেটা সহ আইডি অ্যালবাম সহ টেবিল রয়েছে ... আমি টিআরএস এবং টিডিএস বাদ দিয়েছি

<table id="albums" cellspacing="0">       
</table>

সিএসএসে:

table#albums 
{
    border-collapse:separate;
    border-spacing:0 5px;
}

Comments

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

ভাল পুরানো এইচটিএমএল যদি কাজটি করতে পারে তবে সর্বদা অভিনব সিএসএসের প্রয়োজন হয় না :)

— লুয়েটর

cellspacing<table> এর বৈশিষ্ট্যটি HTML5 তে সমর্থিত নয়।

— Ван

"টিডি" এর ভিতরে কেবল টিআর এর জন্য আবেদন করা সম্ভব?

— জয়সন

Answer 4

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

<tr class="spacer"><td></td></tr>

তারপরে স্পেসার সারিগুলিকে একটি নির্দিষ্ট উচ্চতা এবং স্বচ্ছ পটভূমি দেওয়ার জন্য CSS ব্যবহার করুন।

Comments

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

— স্টিফান কেন্ডাল

এটি 90 এর দশকের কথা মনে করিয়ে দেয়, যখন সিএসএস সমর্থন প্রায় অস্তিত্বহীন ছিল এবং সারণি সর্বাধিক বিন্যাসের জন্য ব্যবহৃত হত। যদিও আমি এখনও এটি +1 দিচ্ছি, কারণ অন্যান্য "উত্তরগুলি" আসলে টেবিল সারিগুলির মধ্যে স্থান তৈরির ক্ষেত্রে আরও ভাল নয় ।

— গোলকধাঁধা

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

— মার্টিনাস

Answer 5

মজিলা বিকাশকারী নেটওয়ার্ক থেকে :

সীমানা-ব্যবধানকারী CSS বৈশিষ্ট্য সংলগ্ন ঘরগুলির সীমানার মধ্যে দূরত্ব নির্দিষ্ট করে (কেবল পৃথক করা সীমানা মডেলের জন্য)। এটি উপস্থাপক এইচটিএমএলে সেলস্পেসিং বৈশিষ্ট্যের সমান, তবে an চ্ছিক দ্বিতীয় মানটি বিভিন্ন অনুভূমিক এবং উল্লম্ব ব্যবধান সেট করতে ব্যবহার করা যেতে পারে।

এই শেষ অংশটি প্রায়শই দেখাশোনা করা হয়। উদাহরণ:

.your-table {
    border-collapse: separate; /* allow spacing between cell borders */
    border-spacing: 0 5px; /* NOTE: syntax is <horizontal value> <vertical value> */

হালনাগাদ

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

নীচের উদাহরণটি দেখানোর জন্য আপনি কীভাবে এটি দেখতে পারেন যে টেবিলটি পৃথক সারিগুলির উপস্থিত রয়েছে, সম্পূর্ণ প্রসারিত CSS মিষ্টি sweet এছাড়াও প্রথম সারিতে tbodyসেটআপটি দিয়ে আরও ফাঁক দেওয়া হয়েছে । বিনামূল্যে নির্দ্বিধায়!

সমর্থন বিজ্ঞপ্তি: আইই 8 +, ক্রোম, ফায়ারফক্স, সাফারি, অপেরা 4+

.spacing-table {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 15px;
  border-collapse: separate;
  table-layout: fixed;
  width: 80%;
  border-spacing: 0 5px; /* this is the ultimate fix */
}
.spacing-table th {
  text-align: left;
  padding: 5px 15px;
}
.spacing-table td {
  border-width: 3px 0;
  width: 50%;
  border-color: darkred;
  border-style: solid;
  background-color: red;
  color: white;
  padding: 5px 15px;
}
.spacing-table td:first-child {
  border-left-width: 3px;
  border-radius: 5px 0 0 5px;
}
.spacing-table td:last-child {
  border-right-width: 3px;
  border-radius: 0 5px 5px 0;
}
.spacing-table thead {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.spacing-table tbody {
  display: table;
  table-layout: fixed;
  width: 100%;
  border-spacing: 0 10px;
}

<table class="spacing-table">
  <thead>
    <tr>
        <th>Lead singer</th>
        <th>Band</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Bono</td>
        <td>U2</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
        <td>Chris Martin</td>
        <td>Coldplay</td>
    </tr>
    <tr>
        <td>Mick Jagger</td>
        <td>Rolling Stones</td>
    </tr>
    <tr>
        <td>John Lennon</td>
        <td>The Beatles</td>
    </tr>
  </tbody>
</table>

Comments

যদি আমি দুটি নির্দিষ্ট সারিগুলির মধ্যে কিছু ভার্ভিকাল স্পেস চাইতাম তবে আমি কেবল একটি স্পেসার সারি যুক্ত করেছি <tr> <td colspan = "2" শৈলী = "প্যাডিং-নীচে: 1 ম;"> </td> </tr>

— পল টেলর

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

— জাস্টাস রোমিজন

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

— পল টেলর

Answer 6

আপনি বিভাজক সারি যুক্ত করার চেষ্টা করতে পারেন:

এইচটিএমএল:

<tr class="separator" />

CSS:

table tr.separator { height: 10px; }

Comments

আই আই এর জন্য, দেহবিহীন টিআরটি স্বীকৃত হবে না। dummy td ট্যাগ যোগ করুন।

— নেপ

সমস্যাটি হ'ল এইচটিএমএল 5-এ, ডাব্লু 3 সি বৈধকরণকারী একটি ত্রুটি নির্গত করবে যা বলেছিল "একটি টেবিল সারি 0 টি কলাম প্রশস্ত ছিল, যা প্রথম সারির দ্বারা প্রতিষ্ঠিত কলাম গণনার চেয়ে কম"।

— ডেভিড গ্রেসন

ভাল লাগল, আমি আরেকটি <tr>, <td> এবং <p> যুক্ত করেছি এবং পি-ট্যাগের দৃশ্যমানতা গোপনে সেট করে রেখেছি .. কাজ করে। :-)

— জেপে

Answer 7

আপনি কোনও টেবিল ঘরের মার্জিন পরিবর্তন করতে পারবেন না। তবে আপনি প্যাডিং পরিবর্তন করতে পারেন। টিডির প্যাডিং পরিবর্তন করুন, যা ঘরটি আরও বড় করবে এবং বর্ধিত প্যাডিংয়ের সাহায্যে পাঠ্যটিকে পাশ থেকে দূরে সরিয়ে দেবে। তবে আপনার যদি সীমান্ত রেখা থাকে তবে এটি আপনি যা চান ঠিক তা হবেনা।

Comments

হ্যাঁ, প্যাডিং সীমানাটিকে নীচে নামাবে, সুতরাং border-bottomএবং এর padding-bottomঅর্থ হ'ল সীমানা প্যাডিংয়ের নীচে থাকবে।

— ড্যান ড্যাসক্লেস্কু

Answer 8

সীমানা-পতনের দিকে একবার নজর দিন : পৃথক বৈশিষ্ট্য (ডিফল্ট) এবং সীমান্ত-ফাঁকা সম্পত্তি।

প্রথমত, আপনি তাদের সীমানা-ধসের সাথে পৃথক করতে হবে , তারপরে আপনি সীমানা-ফাঁক দিয়ে কলাম এবং সারিগুলির মধ্যে স্থান নির্ধারণ করতে পারেন ।

এই উভয় সিএসএস বৈশিষ্ট্য প্রতিটি ব্রাউজারে প্রকৃতপক্ষে সমর্থিত, এখানে দেখুন ।

table     {border-collapse: separate;  border-spacing: 10px 20px;}

table, 
table td,
table th  {border: 1px solid black;}

<table>
  <tr>
    <td>Some text - 1</td>
    <td>Some text - 1</td>
  </tr>
  <tr>
    <td>Some text - 2</td>
    <td>Some text - 2</td>
  </tr>
  <tr>
    <td>Some text - 3</td>
    <td>Some text - 3</td>
  </tr>
</table>

Answer 9

ঠিক আছে, আপনি করতে পারেন

tr.classname td {background-color:red; border-bottom: 5em solid white}

ব্যাকগ্রাউন্ডের রঙটি সারিটির পরিবর্তে টিডিতে সেট করা আছে তা নিশ্চিত করুন। এটি বেশিরভাগ ব্রাউজার জুড়ে কাজ করা উচিত ... (ক্রোম, যেমন & এফএফ পরীক্ষিত)

Comments

এটি অন্তত ফায়ারফক্সে অদ্ভুত উল্লম্ব-প্রান্তিককরণের সমস্যাগুলি তৈরি করে

— cjohansson

Answer 10

আপনাকে border-collapse: separate;টেবিলে সেট করা দরকার ; বেশিরভাগ ব্রাউজারের ডিফল্ট স্টাইলশিটগুলি শুরু হয় border-collapse: collapse;, যা সীমানার ব্যবধানকে আলাদা করে দেয়।

এছাড়াও, সীমানা-ব্যবধান: যায় না TD, যায় না TR।

চেষ্টা করুন:

<html><head><style type="text/css">
    #ex    { border-collapse: separate; }
    #ex td { border-spacing: 1em; }
</style></head><body>
    <table id="ex"><tr><td>A</td><td>B</td></tr><tr><td>C</td><td>D</td></tr></table>
</body>

Comments

সীমানা-ফাঁকা স্থান টেবিলে নয় টেবিলের জন্যও

— সিলভারস্কি

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

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

Answer 11

আপনি টেবিলে লাইন-উচ্চতা ব্যবহার করতে পারেন :

<table style="width: 400px; line-height:50px;">

Comments

আপনি ঠিক বলেছেন তবে পাঠ্যটি লাইন-উচ্চতাও পাবে যা ভাল নয়, আমি মনে করি আপনার কোলেম্যানটি দেখা উচিত! তার দুর্দান্ত সমাধান রয়েছে

— ওয়াকাস তাহির

Answer 12

tr { 
    display: block;
    margin-bottom: 5px;
}

Comments

আমি প্রদর্শন করতে চাই: ইনলাইন-ব্লক;

— ডিএস_উইব_ডিপুলার

Answer 13

খুব দেরী উত্তর :)

যদি আপনি trউপাদানগুলিতে ফ্লোট প্রয়োগ করেন তবে আপনি দুটি সারিটির মধ্যে বিশিষ্টতা সহ স্থান রাখতে পারেন margin।

table tr{
float: left
width: 100%;
}

tr.classname {
margin-bottom:5px;
}

Comments

যে ভীতিকর. এটি আসলে যা করছে তা হ'ল সারির জন্য displayসম্পত্তি সেট করা block। এটি সারিটির মার্জিন রাখতে দেয়। উল্লম্ব মার্জিন "এর জন্য প্রযোজ্য: টেবিল-পরিচয়লিপি, টেবিল এবং ইনলাইন-টেবিল ব্যতীত টেবিল প্রদর্শনের ধরণগুলি ছাড়া সমস্ত উপাদান "। যেহেতু table-rowএই ব্যতিক্রমগুলির কোনও নয়, তারপরে এটি গণনা করে না। আপনি সম্ভবত এটির দ্বারা একই প্রভাব অর্জন করতে পারেন tr {display:block;}তবে আমি জটিল টেবিলে এই পদ্ধতিগুলির কোনওটি ব্যবহারে সতর্ক থাকব। এটি সম্ভবত আপনি যা প্রত্যাশা করেছেন তার ফলাফল হবে না।

— শোলসিংগার

এটা ভীতিজনক, কিন্তু এটি কাজ করে। আই 7 এ নয়, তবে টেবিলের মধ্যে সরাসরি সেলস্পেসিং আই 7-এ কাজ করে।

— লাইকো

ভাসমান সারিগুলি কোনও ভাল সমাধান নয় .. বিশেষত যদি আপনার পৃষ্ঠাটি সারিটির প্রস্থের 2x এর চেয়ে বেশি হয়। উভয় ট্যাগগুলিতে প্রস্থের বৈশিষ্ট্য যুক্ত করুন

— AndreaCi

Answer 14

সারিগুলির মধ্যে ব্যবধানের মায়া তৈরির জন্য, সারিটিতে পটভূমির রঙ প্রয়োগ করুন এবং তারপরে সাদা রঙের সাথে একটি ঘন সীমানা তৈরি করুন যাতে একটি "স্পেস" তৈরি হয় :)

tr 
{
   background-color: #FFD700;
   border: 10px solid white;
}

Answer 15

সারণীর জন্য ব্যবধান দেওয়ার সঠিক উপায় হ'ল সেলপ্যাডিং এবং সেলস্পেসিং উদাহরণস্বরূপ

<table cellpadding="4">

Comments

আপনি এটি সিএসএসের মাধ্যমে করতে পারেন, যা আমি বলব যে এটি আরও "সঠিক" (এ ছাড়া এটি আরও মার্জিত, স্টাইলিংকে মার্কআপ থেকে সিএসএসে স্থানান্তরিত করে ব্যান্ডউইথ সংরক্ষণ করে)।

— ক্যামিলো মার্টিন

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

— মজনিনাবু

Answer 16

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

td { border: 1em solid transparent; }

স্বচ্ছ সীমানার প্রস্থ এখনও রয়েছে।

Answer 17

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

    tr {
      border-bottom:5em solid white;
    }

Answer 18

কেবলমাত্র divভিতরে রাখুন tdএবং নিম্নলিখিত স্টাইলগুলি সেট করুন div:

margin-bottom: 20px;
height: 40px;
float: left;
width: 100%;

Answer 19

আমি বুঝতে পেরেছি এটি একটি পুরানো থ্রেডের উত্তর এবং অনুরোধ করা সমাধান নাও হতে পারে, তবে সমস্ত প্রস্তাবিত সমাধান আমার প্রয়োজন মতো করে নি, এই সমাধানটি আমার পক্ষে কাজ করেছে।

আমার 2 টি টেবিল সেল ছিল, একটি পটভূমির রঙের সাথে অন্যটি সীমানার রঙের। উপরের সমাধানগুলি বর্ডারটি সরিয়ে দেয়, তাই ডানদিকে ঘরটি মধ্য-বাতাসে ভাসমান প্রদর্শিত হবে। সমাধান কৌতুক করেনি প্রতিস্থাপন ছিল table, trএবং tddivs এবং সংশ্লিষ্ট শ্রেণীর সঙ্গে টেবিল হবে div id="table_replacer", TR হবে div class="tr_replacer"এবং TD হবে div class="td_replacer"(পরিবর্তন ট্যাগ ভাল স্পষ্টত যেমন আছে divs করার ক্লোজিং)

আমার সমস্যার সমাধান পেতে সিএসএস হ'ল:

#table_replacer{display:table;}
.tr_replacer {border: 1px solid #123456;margin-bottom: 5px;}/*DO NOT USE display:table-row! It will destroy the border and the margin*/
.td_replacer{display:table-cell;}

আশা করি এটি কাউকে সাহায্য করবে।

Comments

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

— আন্দ্রেয়াস স্ট্যানকিউইটস

Answer 20

আপনি <টিডি /> উপাদানগুলিকে <ডিভ /> উপাদান দিয়ে পূরণ করতে পারেন এবং আপনার পছন্দ মতো ডিভগুলিতে কোনও মার্জিন প্রয়োগ করতে পারেন। সারিগুলির মধ্যে একটি চাক্ষুষ স্থানের জন্য, আপনি <tr /> উপাদানটিতে পুনরাবৃত্তি পটভূমি চিত্র ব্যবহার করতে পারেন। (আমি এই সমাধানটি আজই ব্যবহার করেছি এবং এটি আই 6 এবং ফায়ারফক্স 3 উভয়ই কাজ করে বলে মনে হচ্ছে, যদিও আমি এর পরে আর পরীক্ষা নিই নি।)

এছাড়াও, আপনি <টিডি /> এস এর ভিতরে <div /> গুলি রাখার জন্য আপনার সার্ভার কোডটি সংশোধন করতে বিরত থাকলে, আপনি <টিডি /> সামগ্রীগুলিকে একটি <ডিভি / >, আপনাকে সিএসএসকে পছন্দমতো প্রয়োগ করতে সক্ষম করে।

Answer 21

অথবা সারিগুলির ফাঁকে ফাঁকে ফাঁকে ফাঁকে ফাঁকে ফাঁক যোগ করুন the

Answer 22

কয়েকটি ক্যাভ্যাট সহ এখানে একটি সহজ এবং মার্জিত সমাধান:

• আপনি ফাঁকগুলি আসলে স্বচ্ছ করতে পারবেন না, আপনাকে তাদের একটি নির্দিষ্ট রঙ দেওয়া দরকার।
• আপনি শূন্যস্থানগুলির উপরে এবং নীচে সীমানার কোণগুলি গোল করতে পারবেন না
• আপনার টেবিল কোষগুলির প্যাডিং এবং সীমানা আপনার জানা দরকার

এটি মাথায় রেখে, এটি চেষ্টা করুন:

td {padding:5px 8px;border:2px solid blue;background:#E0E0E0}  /* lets say the cells all have this padding and border, and the gaps should be white */

tr.gapbefore td {overflow:visible}
tr.gapbefore td::before,
tr.gapbefore th::before
{
  content:"";
  display:block;
  position:relative;
  z-index:1;
  width:auto;
  height:0;
  padding:0;
  margin:-5px -10px 5px;  /* 5px = cell top padding, 10px = (cell side padding)+(cell side border width)+(table side border width) */
  border-top:16px solid white;  /* the size & color of the gap you want */
  border-bottom:2px solid blue; /* this replaces the cell's top border, so should be the same as that. DOUBLE IT if using border-collapse:separate */
}

আপনি আসলে যা করছেন তা একটি আয়তক্ষেত্রাকার স্টিক করা ::before যে ফাঁক দিয়ে আপনি চান তার পরের সারিতে থাকা সমস্ত কক্ষের শীর্ষে ব্লকটি । এইগুলি ব্লকগুলি বিদ্যমান সীমানাগুলি আড়াল করে আড়াল করে রাখার জন্য সেগুলি থেকে কিছুটা আটকায়। এই ব্লকগুলি কেবল একটি শীর্ষ এবং নীচের সীমান্তকে এক সাথে স্যান্ডউইচ করা হয়েছে: উপরের সীমানাটি ফাঁক তৈরি করে এবং নীচের সীমানাটি কোষের মূল শীর্ষ সীমানাকে আবার তৈরি করে।

মনে রাখবেন যে টেবিলের পাশাপাশি কক্ষগুলির পাশাপাশি আপনার যদি একটি সীমানা থাকে তবে আপনাকে আপনার 'ব্লকস' এর অনুভূমিক-মার্জিনটি আরও বাড়িয়ে তুলতে হবে। সুতরাং 4px টেবিল সীমানার জন্য, আপনি পরিবর্তে ব্যবহার করতে চাই:

margin:-5px -12px 5px;     /* 14px = original 10px + 2px for 'uncollapsed' part of table border */

এবং যদি আপনার টেবিলটি border-collapse:separateপরিবর্তে ব্যবহার করে border-collapse:collapse, তবে আপনাকে (ক) পূর্ণ টেবিলের সীমানা প্রস্থটি ব্যবহার করতে হবে:

margin:-5px -14px 5px;     /* 14px = original 10px + 4px full width of table border */

... এবং এছাড়াও (খ) সীমান্তের দ্বিগুণ প্রস্থের প্রতিস্থাপন করুন যা এখন ব্যবধানের নীচে প্রদর্শিত হবে:

border-bottom:4px solid blue;     /* i.e. 4px = cell top border + previous row's bottom border */

কৌশলটি সহজেই .গাপ্টর সংস্করণে মানিয়ে নেওয়া হয়, যদি আপনি পছন্দ করেন তবে বা সারি ফাঁকের পরিবর্তে উল্লম্ব (কলাম) ফাঁক তৈরি করতে পারেন।

এখানে একটি কোডেপেন রয়েছে যেখানে আপনি এটি ক্রিয়াতে দেখতে পাবেন: https://codepen.io/anon/pen/agqPpW

Answer 23

এখানে এটি কার্যকরভাবে কাজ করে:

#myOwnTable td { padding: 6px 0 6px 0;}

আমি মনে করি আপনি কোন টিডি দরকার হলে তা নির্দিষ্ট করে আরও সূক্ষ্ম ধরণের লেআউট তৈরি করতে পারেন।

Answer 24

এটি উপরে দেখানো হয়েছে ...

table tr{ float: left width: 100%; }  tr.classname { margin-bottom:5px; } 

উল্লম্ব কলাম প্রান্তিককরণ সরিয়ে দেয় তাই আপনি কীভাবে এটি ব্যবহার করবেন সে সম্পর্কে সতর্ক থাকুন

Answer 25

আপনি চেষ্টা করেছেন:

tr.classname { margin-bottom:5em; }

বিকল্পভাবে, প্রতিটি টিডি পাশাপাশি সামঞ্জস্য করা যেতে পারে:

td.classname { margin-bottom:5em; }

অথবা

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

Comments

এটি কি আসলে কাজ করে? আমার আছে div.el { display: table-row; margin: 10px; }, এবং মার্জিন কিছুই করে না। আমি জানি এটি একটি বাস্তব টেবিলের চেয়ে কিছুটা আলাদা, তবে এটি হওয়া উচিত নয় ...

— bradlis7

সারণি সারি / কোষের মার্জিন নেই।

— এস্পেন