সিএসএস সেল মার্জিন

Question 1

আমার এইচটিএমএল নথিতে আমার কাছে দুটি কলাম এবং একাধিক সারি সহ একটি টেবিল রয়েছে। CSS এর সাথে প্রথম এবং দ্বিতীয় কলামের মধ্যে আমি কীভাবে স্থান বাড়িয়ে তুলতে পারি? আমি "মার্জিন-রাইট: 10px" প্রয়োগ করার চেষ্টা করেছি; বাম হাতের প্রতিটি কক্ষকে, কিন্তু কোনও প্রভাব ফেলেনি।

Question 2

এটি আপনার প্রথমটিতে প্রয়োগ করুন <td>:

padding-right:10px;

এইচটিএমএল উদাহরণ:

<table>
   <tr>
      <td style="padding-right:10px">data</td>
      <td>more data</td>
   </tr>
</table>

Question 3

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

যেমন কেউ উল্লেখ করেছেন, মার্জিনের স্পেসিফিকেশনগুলি টেবিল কোষগুলির জন্য উপেক্ষা করা হয়:

সিএসএস 2.1 নির্দিষ্টকরণ - টেবিল - সারণী সামগ্রীর ভিজ্যুয়াল বিন্যাস

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

তাহলে "সঠিক" উপায় কী? আপনি যদি cellspacingসারণির বৈশিষ্ট্যটি প্রতিস্থাপন করতে চান তবে border-spacing( border-collapseঅক্ষম থাকা) একটি প্রতিস্থাপন। যাইহোক, যদি প্রতি ঘরে প্রতিটি "মার্জিন" প্রয়োজন হয়, তবে সিএসএস ব্যবহার করে কীভাবে এটি সঠিকভাবে অর্জন করা যায় তা আমি নিশ্চিত নই। আমি কেবল হ্যাকের কথা ভাবতে পারি যে paddingউপরের মতো ব্যবহার করা, কোষগুলির কোনও স্টাইলিং (পটভূমির রঙ, সীমানা ইত্যাদি) এড়ানো এবং পরিবর্তে এই জাতীয় স্টাইলিং প্রয়োগ করার জন্য কোষের অভ্যন্তরে ধারক ডিআইভি ব্যবহার করা।

আমি কোনও সিএসএস বিশেষজ্ঞ নই, সুতরাং উপরের দিক থেকে আমি ভুল হতে পারি (যা জানতে পেরে ভাল লাগবে! আমিও একটি টেবিল সেল মার্জিন সিএসএস সমাধান চাই)।

চিয়ার্স!

Question 4

আপনি যদি প্যাডিং ব্যবহার করতে না পারেন (উদাহরণস্বরূপ আপনার টিডিতে সীমানা রয়েছে) এটি ব্যবহার করে দেখুন

table { 
           border-collapse: separate;
           border-spacing: 2px;
}

Question 5

আমি বুঝতে পারি এটি বেশ বিচলিত, তবে রেকর্ডের জন্য, আপনি এটি করতে সিএসএস নির্বাচকগুলিও ব্যবহার করতে পারেন (ইনলাইন শৈলীর প্রয়োজন অপসারণ করে।) এই সিএসএস প্রতিটি সারিটির প্রথম কলামে প্যাডিং প্রয়োগ করে:

table > tr > td:first-child { padding-right:10px }

এবং এটি আপনার এইচটিএমএল, সান সিএসএস হবে !:

<table><tr><td>data</td><td>more data</td></tr></table>

এটি আরও অনেক মার্জিত মার্কআপের জন্য অনুমতি দেয়, বিশেষত সিএসএসের সাথে আপনাকে প্রচুর সুনির্দিষ্ট ফরম্যাটিং করতে হবে।

Question 6

মার্জিন দুর্ভাগ্যক্রমে পৃথক কক্ষগুলিতে কাজ করে না, তবে আপনি দুটি কক্ষের মধ্যে অতিরিক্ত কলাম যুক্ত করতে পারেন যার মধ্যে আপনি একটি স্থান রাখতে চান ... অন্য বিকল্পটি হ'ল পটভূমির মতো একই রঙের একটি সীমানা ব্যবহার করা ...

Question 7

আপনি কেবল এটি করতে পারেন:

<html>
<table>
    <tr>
        <td>one</td>
        <td width="10px"></td>
        <td>two</td>
    </tr>
</table>
</html>

কোনও সিএসএসের প্রয়োজন নেই :) এই 10px আপনার স্থান।

Question 8

ব্যবহার করে দেখুন padding-right। আপনাকে marginকক্ষগুলির মধ্যে রাখার অনুমতি নেই ।

<table>
   <tr>
      <td style="padding-right: 10px;">one</td>
      <td>two</td>
   </tr>
</table>

Question 9

সীমান্ত-পতন ব্যবহার : পৃথক; আমার পক্ষে কাজ করেনি, কারণ আমার কেবল টেবিলের পাশের টেবিলের ঘরের মধ্যে নয়, টেবিলের অভ্যন্তরে মার্জিন দরকার need

আমি পরবর্তী সমাধান নিয়ে এসেছি:

- সিএসএস

.tableDiv{
    display: table;
}

.cellSeperator {
    display: table-cell;
    width: 20px;
}

.cell1 {
    display: table-cell;
    width: 200px;
}

.cell2 {
    display: table-cell;
    width: 50px;
}

- এইচটিএমএল

<div class="tableDiv">
    <div class="cell1"></div>
    <div class="cellSeperator"></div>
    <div class="cell2"></div>
</div>

Question 10

এই সমাধানটি tdউভয়ের জন্য borderএবং paddingস্টাইলিংয়ের জন্য প্রয়োজন ।
(Chrome 32, IE 11, ফায়ারফক্স 25 এ পরীক্ষিত)

CSS:
table {border-collapse: separate; border-spacing:0; }   /*  separate needed      */
td { display: inline-block; width: 33% }  /*  Firefox need inline-block + width  */
td { position: relative }                 /*  needed to make td move             */
td { left: 10px; }                        /*  push all 10px                      */
td:first-child { left: 0px; }             /*  move back first 10px               */
td:nth-child(3) { left: 20px; }           /*  push 3:rd another extra 10px       */

/*  to support older browsers we need a class on the td's we want to push
    td.col1 { left: 0px; }
    td.col2 { left: 10px; }
    td.col3 { left: 20px; }
*/

HTML:
<table>
    <tr>
        <td class='col1'>Player</td>
        <td class='col2'>Result</td>
        <td class='col3'>Average</td>
    </tr>
</table>

আপডেট হয়েছে 2016

ফায়ারফক্স এখন inline-blockসেট ছাড়াই এটি সমর্থন করেwidth

table {border-collapse: separate; border-spacing:0; }
td { position: relative; padding: 5px; }
td { left: 10px; }
td:first-child { left: 0px; }
td:nth-child(3) { left: 20px; }
td { border: 1px solid gray; }


/* CSS table */
.table {display: table; }
.tr { display: table-row; }
.td { display: table-cell; }

.table { border-collapse: separate; border-spacing:0; }
.td { position: relative; padding: 5px; }
.td { left: 10px; }
.td:first-child { left: 0px; }
.td:nth-child(3) { left: 20px; }
.td { border: 1px solid gray; }

<table>
  <tr>
    <td>Player</td>
    <td>Result</td>
    <td>Average</td>
  </tr>
</table>

<div class="table">
  <div class="tr">
    <div class="td">Player</div>
    <div class="td">Result</div>
    <div class="td">Average</div>
  </div>
</div>

স্নিপেট প্রসারিত করুন

Question 11

আপনি কোনও কক্ষে স্বতন্ত্র কলামগুলি সেভাবে একক করতে পারবেন না। আমার মতে, আপনার সর্বোত্তম বিকল্পটি হ'ল style='padding-left:10px'দ্বিতীয় কলামে একটি যুক্ত করা এবং শৈলীর অভ্যন্তরীণ ডিভ বা উপাদানটিতে প্রয়োগ করা। এইভাবে আপনি একটি বৃহত্তর স্থানের মায়া অর্জন করতে পারেন।

Question 12

আপনার যদি টেবিলের প্রস্থ নিয়ন্ত্রণ থাকে, সমস্ত টেবিল কোষে একটি প্যাডিং বাম সন্নিবেশ করুন এবং পুরো টেবিলের নেতিবাচক মার্জিন-বাম প্রবেশ করুন।

table {
    margin-left: -20px;
    width: 720px;
}

table td {
    padding-left: 20px;
}

দ্রষ্টব্য, টেবিলের প্রস্থকে প্যাডিং / মার্জিন প্রস্থ অন্তর্ভুক্ত করা দরকার। উদাহরণস্বরূপ উপরেরটি ব্যবহার করে, সারণীর চাক্ষুষ প্রস্থ 700px হবে।

আপনি যদি টেবিলের কক্ষে সীমানা ব্যবহার করেন তবে এটি সেরা সমাধান নয়।

Question 13

সমাধান

আমি এই সমস্যাটি সমাধান করার সর্বোত্তম উপায়টি পরীক্ষা এবং ত্রুটির সংমিশ্রণ এবং আমার আগে যা লেখা ছিল তা পড়ার মিশ্রণটি পেয়েছিলাম:

http://jsfiddle.net/MG4hD/

আপনি দেখতে পাচ্ছেন যে আমার কাছে বেশ কৌতুকপূর্ণ জিনিস চলছে ... তবে এটি দেখতে ভাল লাগার মূল কারণ হ'ল:

প্যারেন্ট এলিমেন্ট (উল): সীমান্ত-পতন: পৃথক; সীমানা-ব্যবধান: 25 মিমি; মার্জিন-বাম: -২৫ মিমি;
শিশুদের এলিমেন্টস (এলআই): প্রদর্শন: টেবিল-সেল; উল্লম্ব-সারিবদ্ধ: মাঝারি;

এইচটিএমএল

<ul>
<li><span class="large">3</span>yr</li>
<li>in<br>stall</li>
<li><span class="large">9</span>x<span class="large">5</span></li>
<li>on<br>site</li>
<li>globe</li>
<li>back<br>to hp</li>
</ul>

সিএসএস

ul { border: none !important; border-collapse: separate; border-spacing: .25em; margin: 0 0 0 -.25em; }
li { background: #767676 !important; display: table-cell; vertical-align: middle; position: relative; border-radius: 5px 0; text-align: center; color: white; padding: 0 !important; font-size: .65em; width: 4em; height: 3em; padding: .25em !important; line-height: .9; text-transform: uppercase; }

Question 14

প্রান্তরের স্থলে সীমানা নির্ধারণের সিয়ানের সমাধান অনুসরণ করে, আমি আবিষ্কার করেছি যে আপনি পটভূমির সাথে রঙ মেলে তা এড়াতে আপনি স্বচ্ছ হতে সীমানা রঙ সেট করতে পারেন। এফএফ 17, আই 9, ক্রোম ভি 23 এ কাজ করে। শালীন সমাধানের মতো মনে হচ্ছে আপনি যদি সত্যিকারের সীমানারও প্রয়োজন না হন।

Question 15

<!DOCTYPE html>
<html>
<head>
<style>
table{
border-spacing: 16px 4px;
}

 td {
    border: 1px solid black;
}
</style>
</head>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>		
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>		
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>		
    <td>80</td>
  </tr>
</table>

</body>
</html>

স্নিপেট প্রসারিত করুন

প্যাডিং ব্যবহার করা এটি করার সঠিক উপায় নয়, এটি চেহারা পরিবর্তন করতে পারে তবে আপনি যা চেয়েছিলেন তা তা নয়। এটি আপনার সমস্যা সমাধান করতে পারে।

Question 16

আপনি উভয় ব্যবহার করতে পারেন:

padding-right:10px;

padding-right:10%;

তবে এটি % দিয়ে ব্যবহার করা ভাল ।

Question 17

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

<table>
  <colgroup>
    <col>
    <col width="20px">
    <col>
  </colgroup>
  <tr>
     <td>data</td>
     <td></td>
     <td>more data</td>
   </tr>
</table>

সারণী কক্ষগুলির সীমানাগুলি ব্যবহার করে স্টাইল করুন: নবম-চাইল্ড যাতে দ্বিতীয় এবং তৃতীয় কলামগুলি একক কলাম হিসাবে উপস্থিত হয়।

table tr td:nth-child(2) { border: 1px solid black; border-right:0; }
table tr td:nth-child(3) { border: 1px solid black; border-left:0; }