style - table html css




تعيين cellpadding و cellspacing في CSS؟ (18)

افتراضي

السلوك الافتراضي للمتصفح يعادل:

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 .

جربه بنفسك!

Here يمكنك العثور على طريقة html القديمة لتحقيق ذلك.

في جدول HTML ، يمكن ضبط لوحة cellpadding cellspacing على النحو التالي:

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

كيف يمكن تحقيق ذلك باستخدام CSS؟


CSS:

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

أيضًا ، إذا كنت تريد cellspacing="0" ، فلا تنس إضافة border-collapse: collapse في ورقة أنماط جدولك.


اعتدت !important بعد انهيار مثل الحدود

border-collapse: collapse !important;

ويعمل لي في IE7. يبدو لتجاوز سمة cellspacing.


الحل البسيط لهذه المشكلة هو:

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

بالنسبة لأولئك الذين يريدون قيمة cellspacing بدون الصفر ، عملت CSS التالية بالنسبة لي ، لكنني فقط قادرة على اختبارها في Firefox. انظر رابط Quirksmode المنشور في مكان آخر للحصول على تفاصيل التوافق. يبدو أنه قد لا يعمل مع إصدارات Internet Explorer القديمة.

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

جرب هذا:

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

أو جرب هذا:

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

فقط باستخدام border-collapse: collapse للجدول الخاص بك ، padding لـ th أو td


ل cellspacing الجدول و cellpadding عفا عليها الزمن في HTML 5. الآن بالنسبة للتسلسل الخلقي لديك لاستخدام تباعد الحدود وبالنسبة ل cellpadding لديك لاستخدام الحد من الانهيار.

وتأكد من عدم استخدام هذا في شفرة HTML5 الخاصة بك. حاول دائمًا استخدام هذه القيم في ملف CSS-3.


ما أفهمه من تصنيفات W3C هو أن <table> s مخصص لعرض البيانات "فقط".

وبناءً على ذلك وجدت أنه من الأسهل بكثير إنشاء <div> مع الخلفيات وكل ذلك ولديك جدول يحتوي على بيانات تطفو فوقها باستخدام position: absolute; background: transparent; ...

يعمل على Chrome و IE (6 والإصدارات الأحدث) و Mozilla (2 والإصدارات الأحدث).

يتم استخدام الهوامش (أو تعني على أي حال) لإنشاء فاصل بين عناصر الحاوية ، مثل <table> ، <div> و <form> ، وليس <tr> ، <td> ، <span> أو <input> . إن استخدامه لأي شيء آخر بخلاف عناصر الحاوية سيبقيك مشغولاً بتعديل موقع الويب الخاص بك لتحديثات المستعرض المستقبلية.


هذا النمط هو لإعادة تعيين كامل للجداول - cellpadding و cellspacing والحدود .

كان لدي هذا النمط في ملف 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*/
}

يعمل هذا الاختراق لبرنامج Internet Explorer 6 والإصدارات الأحدث و Google Chrome و Firefox و Opera :

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

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

الإعلان * مخصص للمتصفح Internet Explorer 6 و 7 ، وستتجاهله المتصفحات الأخرى بشكل صحيح.

expression('separate', cellSpacing = '10px') 'separate' ، ولكن يتم تشغيل كلا البيانين ، كما في JavaScript يمكنك تمرير المزيد من الوسائط أكثر من المتوقع وسيتم تقييم كل منها.


يمكنك بسهولة تعيين الحشو داخل خلايا الجدول باستخدام الخاصية padding CSS ، وهي طريقة صالحة لإنتاج نفس التأثير مثل سمة cellpadding الجدول.

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>

وبالمثل ، يمكنك استخدام خاصية تباعد حدود CSS لتطبيق التباعد بين حدود خلية الجدول المجاورة مثل سمة cellspacing. ومع ذلك ، من أجل العمل على تباعد الحدود ، يجب أن تكون قيمة muse property-collapse border منفصلة ، وهذا هو التقصير.

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>[email protected]</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Peter</td>
        <td>Parker</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>3</td>
        <td>John</td>
        <td>Rambo</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>

</body>
</html>


ما عليك سوى استخدام قواعد padding CSS مع بيانات الجدول:

td { 
    padding: 20px;
}

ولتباعد الحدود:

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

ومع ذلك ، يمكن أن يؤدي ذلك إلى حدوث مشكلات في الإصدار الأقدم من المستعرضات مثل Internet Explorer نظرًا لتطبيق الاختلاف في نموذج الصندوق.


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

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

<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>

يمكن إعطاء padding cell-spacing خلال padding في CSS بينما يمكن ضبط cell-spacing طريق تعيين border-spacing للجدول.

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

Fiddle .


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

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

إذا لم يعمل margin ، فحاول تعيين display tr ثم يعمل الهامش.







alignment