CSS තුළ සෛල පෑඩින් සහ සෛල අවකාශය සකසන්න?

HTML වගුවක, cellpaddingසහ මේ ආකාරයට cellspacingසැකසිය හැකිය:

<table cellspacing="1" cellpadding="1">

CSS භාවිතයෙන් එය කළ හැක්කේ කෙසේද?

මූලික කරුණු

CSS හි "සෙල් පෑඩින්" පාලනය කිරීම සඳහා, ඔබට සරලවම paddingමේස සෛල මත භාවිතා කළ හැකිය . උදා: "සෙල් පෑඩින්" හි 10px සඳහා:

td { 
    padding: 10px;
}

"සෛල අවකාශය" සඳහා, ඔබට border-spacingCSS දේපල ඔබේ වගුවට යෙදිය හැකිය . උදා: “සෛල අවකාශයේ” 10px සඳහා:

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

මෙම දේපල මඟින් වෙනම තිරස් හා සිරස් පරතරයන් සඳහා ඉඩ ලබා දෙනු ඇත, පැරණි පාසැල් "සෛල අවකාශය" සමඟ ඔබට කළ නොහැකි දෙයක්.

IE <= 7 හි ගැටළු

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 7 හරහා ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හැර සෙසු ජනප්‍රිය බ්‍රව්සර්වල මෙය ක්‍රියාත්මක වනු ඇත. මම "පාහේ" කියන්නේ මෙම බ්‍රව්සර් තවමත් border-collapseදේපල වලට සහය දක්වන නිසා යාබද මේස සෛල වල මායිම් ඒකාබද්ධ කරයි. ඔබ සෛල පරතරය තුරන් කිරීමට උත්සාහ කරන්නේ නම් (එනම්, cellspacing="0") border-collapse:collapseඑකම බලපෑමක් ඇති කළ යුතුය: වගු සෛල අතර ඉඩක් නැත. cellspacingවගු මූලද්රව්යයේ පවතින HTML ගුණාංගයක් අභිබවා නොයන බැවින් මෙම සහාය දෝෂ සහිතය .

කෙටියෙන් කිවහොත්: අන්තර්ජාල නොවන ගවේෂක 5-7 බ්‍රව්සර් සඳහා, border-spacingඔබ හසුරුවයි. ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සඳහා, ඔබගේ තත්වය හරියටම හරි නම් (ඔබට සෛල 0 ක් අවශ්‍ය වන අතර ඔබේ වගුවේ එය දැනටමත් අර්ථ දක්වා නොමැත), ඔබට භාවිතා කළ හැකිය border-collapse:collapse.

table { 
    border-spacing: 0;
    border-collapse: collapse;
}

සටහන: කෙනෙකුට වගු සඳහා යෙදිය හැකි සහ කුමන බ්‍රව්සර් සඳහා CSS ගුණාංග පිළිබඳ විශාල දළ විශ්ලේෂණයක් සඳහා, මෙම අපූරු Quirksmode පිටුව බලන්න .

පෙරනිමිය

බ්‍රව්සරයේ පෙරනිමි හැසිරීම මෙයට සමාන වේ:

table {border-collapse: collapse;}
td    {padding: 0px;}

සෙල් පෑඩින් කිරීම

සෛලයේ අන්තර්ගතය සහ සෛල බිත්තිය අතර ඇති ඉඩ ප්‍රමාණය නියම කරයි

table {border-collapse: collapse;}
td    {padding: 6px;}

සෛල අවකාශය

වගු සෛල අතර ඇති අවකාශය පාලනය කරයි

table {border-spacing: 2px;}
td    {padding: 0px;}

දෙකම

table {border-spacing: 2px;}
td    {padding: 6px;}

දෙකම (විශේෂ)

table {border-spacing: 8px 2px;}
td    {padding: 6px;}

සටහන:border-spacing සකසා ඇත්නම් , එයින් දැක්වෙන්නේ border-collapseවගුවේ දේපල separateබවයි.

එය ඔබම උත්සාහ කරන්න!

මෙන්න ඔබ මෙම සාක්ෂාත් කර ගැනීම පැරණි HTML ආකාරයෙන් සොයා ගත හැකි වනු ඇත.

table
{
    border-collapse: collapse; /* 'cellspacing' equivalent */
}

table td, table th
{
    padding: 0; /* 'cellpadding' equivalent */
}

වගු සෛල මත ආන්තිකයන් සැකසීම මා දන්නා තරමින් කිසිදු බලපෑමක් ඇති නොකරයි. සඳහා සැබෑ CSS සමාන cellspacingවේborder-spacing - නමුත් එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි ක්‍රියා නොකරයි.

සඳහන් කළ border-collapse: collapseපරිදි සෛල පරතරය 0 ලෙස විශ්වාසදායක ලෙස සැකසීමට ඔබට භාවිතා කළ හැකිය , නමුත් වෙනත් ඕනෑම අගයක් සඳහා මම සිතන්නේ එකම හරස් බ්‍රව්සර ක්‍රමය වන්නේ cellspacingගුණාංගය දිගටම භාවිතා කිරීමයි .

මෙම හැක් එක ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සහ පසුව ගූගල් ක්‍රෝම් , ෆයර්ෆොක්ස් සහ ඔපෙරා සඳහා ක්‍රියා කරයි :

table {
    border-collapse: separate;
    border-spacing: 10px; /* cellspacing */
    *border-collapse: expression('separate', cellSpacing = '10px');
}

table td, table th {
    padding: 10px; /* cellpadding */
}

එම * ප්‍රකාශය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6 සහ 7 සඳහා වන අතර අනෙක් බ්‍රව්සර් එය නිසි ලෙස නොසලකා හරිනු ඇත.

expression('separate', cellSpacing = '10px')ප්‍රතිලාභ 'separate', නමුත් ප්‍රකාශ දෙකම ක්‍රියාත්මක වේ, ජාවාස්ක්‍රිප්ට් හි මෙන් ඔබට අපේක්ෂිත ප්‍රමාණයට වඩා තර්ක ඉදිරිපත් කළ හැකි අතර ඒවා සියල්ලම ඇගයීමට ලක් කෙරේ.

ශුන්‍ය නොවන සෛල අවකාශ අගයක් අවශ්‍ය අයට, පහත දැක්වෙන CSS මා වෙනුවෙන් වැඩ කළ නමුත් මට එය කළ හැක්කේ ෆයර්ෆොක්ස් හි පමණි.

අනුකූලතා විස්තර සඳහා වෙනත් තැනක පළ කර ඇති Quirksmode සබැඳිය බලන්න . එය පැරණි ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් අනුවාද සමඟ ක්‍රියා නොකරනු ඇති බව පෙනේ.

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

මෙම ගැටලුවට සරල විසඳුම නම්:

table
{
    border: 1px solid #000000;
    border-collapse: collapse;
    border-spacing: 0px;
}
table td
{
    padding: 8px 8px;
}

එසේම, ඔබට අවශ්‍ය නම් cellspacing="0", border-collapse: collapseඔබේ tableමෝස්තර පත්‍රය එක් කිරීමට අමතක නොකරන්න .

කොටුවේ අන්තර්ගතය div එකකින් ඔතා ඔබට අවශ්‍ය ඕනෑම දෙයක් කළ හැකිය, නමුත් ඒකාකාරී බලපෑමක් ලබා ගැනීම සඳහා සෑම සෛලයක්ම තීරුවක ඔතා තැබිය යුතුය. උදාහරණයක් ලෙස, පුළුල් වම් සහ දකුණු ආන්තිකයන් ලබා ගැනීමට:

එබැවින් CSS වනු ඇත,

div.cellwidener {
  margin: 0px 15px 0px 15px;
}
td.tight {
  padding: 0px;
}

<table border="0">
  <tr>
    <td class="tight">
      <div class="cellwidener">My content</div>
    </td>
  </tr>
</table>

ඔව්, එය කරදරයකි. ඔව්, එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සමඟ ක්‍රියා කරයි. ඇත්ත වශයෙන්ම, මම මෙය අත්හදා බැලුවේ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් සමඟ පමණි, මන්ද අපට වැඩ කිරීමේදී භාවිතා කිරීමට අවසර ඇත්තේ එපමණයි.

යන්තම් භාවිතා border-collapse: collapseඔබගේ වගුව සඳහා, සහ paddingසඳහා thහෝ td.

මෙම ශෛලිය වගු සඳහා සම්පූර්ණ යළි පිහිටුවීම සඳහා වේ - සෛල පෑඩින් කිරීම , සෛල අවකාශය සහ මායිම් .

මගේ reset.css ගොනුවේ මෙම විලාසය තිබුණි:

table{
    border:0;          /* Replace border */
    border-spacing: 0px; /* Replace cellspacing */
    border-collapse: collapse; /* Patch for Internet Explorer 6 and Internet Explorer 7 */
}
table td{
    padding: 0px; /* Replace cellpadding */
}

ටී.බී.එච්. CSS සමඟ විනෝද වීමට ඔබ භාවිතා කළ හැකියcellpadding="0" cellspacing="0" ...

වෙනත් අය ආන්තිකයන් යෝජනා කරන <td>බව පැහැදිලිය.

table th,td {
    padding: 8px 2px;
}
table {
    border-collapse: separate;
    border-spacing: 2px;
}

වගු දත්ත සමඟ CSS පෑඩින් නීති භාවිතා කරන්න:

td { 
    padding: 20px;
}

මායිම් පරතරය සඳහා:

table { 
    border-spacing: 1px;
    border-collapse: collapse;
}

කෙසේ වෙතත්, කොටු ආකෘතිය වෙනස් ලෙස ක්‍රියාත්මක කිරීම නිසා ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් වැනි පැරණි බ්‍රව්සර් වල ගැටළු ඇති කළ හැකිය.

ඩබ්ලිව් 3 සී වර්ගීකරණයන්ගෙන් මා තේරුම් ගත් දෙය නම් <table>දත්ත යනු 'පමණක්' දත්ත ප්‍රදර්ශනය කිරීම සඳහා ය.

ඒ මත පදනම්ව <div>පසුබිම් සහ ඒ සියල්ල සමඟින් නිර්මාණය කිරීම මට පහසු වූ අතර එය භාවිතා කරමින් දත්ත පාවෙන මේසයක් position: absolute;සහ background: transparent;...

එය ක්‍රෝම්, ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (6 සහ ඊට පසු) සහ මොසිල්ලා ෆයර්ෆොක්ස් (2 සහ පසුව) මත ක්‍රියා කරයි.

ආන්තික මෙන් රුවනයකි අංග අතර spacer නිර්මාණය කිරීමට (ඇසීමි හෝ අදහස්) භාවිත කල <table>, <div>හා <form>, නෑ <tr>, <td>, <span>හෝ <input>. බහාලුම් අංග හැර වෙනත් ඕනෑම දෙයක් සඳහා එය භාවිතා කිරීම අනාගත බ්‍රව්සර් යාවත්කාලීන කිරීම් සඳහා ඔබේ වෙබ් අඩවිය සැකසීමට කාර්යබහුල වනු ඇත.

CSS:

selector{
    padding:0 0 10px 0; // Top left bottom right 
}

CSS පෑඩින් දේපල භාවිතයෙන් ඔබට පහසුවෙන් මේස සෛල තුළ පෑඩින් සැකසිය හැකිය. වගුවේ සෙල් පෑඩින් ගුණාංගයට සමාන බලපෑමක් ඇති කිරීම සඳහා එය වලංගු ක්‍රමයකි.

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

table th,
table td {
  padding: 10px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellpadding in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

ඒ හා සමානව, ඔබට සීඑස්එස් මායිම්-පරතරය දේපල භාවිතා කර සෛල අවකාශය වැනි යාබද මේස සෛල මායිම් අතර පරතරය යෙදිය හැකිය. කෙසේ වෙතත්, දේශසීමා පරතරය වැඩ කිරීම සඳහා දේශසීමා බිඳවැටීමේ දේපල කෞතුකාගාරයේ වටිනාකම වෙනම විය යුතු අතර එය පෙරනිමිය.

table {
  border-collapse: separate;
  border-spacing: 10px;
  /* Apply cell spacing */
}

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

table th,
table td {
  padding: 5px;
  /* Apply cell padding */
}

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="utf-8">
  <title>Set Cellspacing in CSS</title>

</head>

<body>

  <table>
    <thead>
      <tr>
        <th>Row</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Clark</td>
        <td>Kent</td>
        <td>clarkkent@mail.com</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>peterparker@mail.com</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>johnrambo@mail.com</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

මේක උත්සාහ කරන්න:

table {
    border-collapse: separate;
    border-spacing: 10px;
}
table td, table th {
    padding: 10px;
}

නැතහොත් මෙය උත්සාහ කරන්න:

table {
    border-collapse: collapse;
}
table td, table th {
    padding: 10px;
}

!importantමායිම් කඩාවැටීමෙන් පසුව මම භාවිතා කළෙමි

border-collapse: collapse !important;

එය IE7 හි මට වැඩ කරයි. එය සෛල පරතරය අභිබවා යන බවක් පෙනේ.

<table>
    <tr>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

cell-paddingවිසින් ලබා දිය හැක paddingඅතර CSS තුළ cell-spacingපිහිටුවීම මගින් සකස් කළ හැකි border-spacingවගුව සඳහා.

table {
    border-spacing: 10px;
}
td {
    padding: 10px;
}

ෆෙඩෙල් .

td {
    padding: npx; /* For cellpadding */
    margin: npx; /* For cellspacing */
    border-collapse: collapse; /* For showing borders in a better shape. */
}

නම් marginවැඩ නැහැ, කට්ටලයක් කිරීමට උත්සාහ displayකිරීම trසඳහා blockපසුව ආන්තිකය වැඩ කරනු ඇත.

වගු සඳහා, HTML 5 හි සෛල අවකාශය සහ සෙල් පැඩින් යල් පැන ඇත.

දැන් සෛල අවකාශය සඳහා ඔබ දේශ සීමා පරතරය භාවිතා කළ යුතුය. සෙල් පෑඩින් කිරීම සඳහා ඔබ දේශ සීමා බිඳවැටීම භාවිතා කළ යුතුය.

ඔබේ HTML5 කේතයේ මෙය භාවිතා නොකරන බවට වග බලා ගන්න. සෑම විටම CSS 3 ගොනුවක මෙම අගයන් භාවිතා කිරීමට උත්සාහ කරන්න.

table {
    border-spacing: 4px; 
    color: #000; 
    background: #ccc; 
}
td {
    padding-left: 4px;
}

HTML වගුවක, cellpaddingසහ මේ ආකාරයට cellspacingසැකසිය හැකිය:

සඳහා සෛල-පුරවන :

සරල td/thකොටුවක් අමතන්න padding.

උදාහරණයක්:

/******Call-Padding**********/

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

<table>
        <tr>
            <th>Head1 </th>
            <th>Head2 </th>
            <th>Head3 </th>
            <th>Head4 </th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

table {
    border-collapse: collapse;
}

td {
  border: 1px solid red;
  padding: 10px;
}

සඳහා සෛල-පරතර ලෑම

සරල ලෙස අමතන්න table border-spacing

උදාහරණයක්:

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

<table>
        <tr>
            <th>Head1</th>
            <th>Head2</th>
            <th>Head3</th>
            <th>Head4</th>
        </tr>
        <tr>
            <td>11</td>
            <td>12</td>
            <td>13</td>
            <td>14</td>
        </tr>
        <tr>
            <td>21</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
        </tr>
        <tr>
            <td>31</td>
            <td>32</td>
            <td>33</td>
            <td>34</td>
        </tr>
        <tr>
            <td>41</td>
            <td>42</td>
            <td>43</td>
            <td>44</td>
        </tr>
    </table>

/********* Cell-Spacing   ********/
table {
    border-spacing: 10px;
    border-collapse: separate;
}

td {
  border: 1px solid red;
}

CSS ප්‍රභව සබැඳිය මඟින් තවත් වගු විලාසය මෙහි ඔබට CSS විසින් තවත් වගු විලාසය ලබා ගනී .

ඔබේ CSS හි මෙවැනි දෙයක් කළ හැකිය, border-spacingසහ padding:

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}

<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>

ශෛලිය කෙලින්ම මේසයට එකතු කිරීම ගැන කුමක් කිව හැකිද? මෙය tableඔබේ CSS හි භාවිතා කිරීම වෙනුවට, ඔබේ පිටුවෙහි බහු වගු තිබේ නම් එය BAD ප්‍රවේශයකි:

<table style="border-collapse: separate;border-spacing: 2px;">
    <tr>
        <td style="padding: 4px 4px;">Some Text</td>
    </tr>
</table>

මම මෙය යෝජනා කරන අතර විශේෂිත වගුව සඳහා වන සියලුම සෛල ක්‍රියාත්මක වේ.

table.tbl_classname td, th {
    padding: 5px 5px 5px 4px   ;
 }

ඔබට පහත කේතය පරීක්ෂා කර index.htmlබලා එය ක්‍රියාත්මක කරන්න.

<!DOCTYPE html>
<html>
   <head>
      <style>
         table{
         border-spacing:10px;
         }
         td{
         padding:10px;
         }
      </style>
   </head>
   <body>
      <table cellspacing="0" cellpadding="0">
         <th>Col 1</th>
         <th>Col 2</th>
         <th>Col 3</th>
         <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
         </tr>
      </table>
   </body>
</html>

නිමැවුම්: