سؤال

في مستند HTML الخاص بي، لدي جدول مع عمودين و صفوف متعددة. كيف يمكنني زيادة المساحة بين العمود الأول والثاني مع CSS؟ لقد حاولت تطبيق "الهامش اليمنى: 10 بكسل؛" لكل من الخلايا على الجانب الأيسر، ولكن دون أي تأثير.

هل كانت مفيدة؟

المحلول

تطبيق هذا على الأول <td>:

padding-right:10px;

مثال HTML:

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

نصائح أخرى

كلمة تحذير على الرغم من padding-right قد تحل مشكلة (مرئية) الخاصة بك، إنها ليست الطريقة الصحيحة لإضافة تباعد ما بين خلايا الجدول. ماذا padding-right هل يشبه الخلية ما يفعله لمعظم العناصر الأخرى: يضيف مساحة داخل الخلية. إذا لم يكن لدى الخلايا لونا أو لون خلفية أو أي شيء آخر يعطي اللعبة بعيدا، فيمكن أن يحاكي هذا تأثير إعداد المسافة بين الخلايا، ولكن ليس خلاف ذلك.

كما لاحظ شخص ما، يتم تجاهل مواصفات الهامش لخلايا الجدول:

CSS 2.1 المواصفات - الجداول - التصميم المرئي لمحتويات الجدول

تولد عناصر الطاولة الداخلية صناديق مستطيلة ذات محتوى وحدود. الخلايا لديها حشوة كذلك. لا تملك عناصر الطاولة الداخلية هوامش.

ما هو الطريق "الصحيح" إذن؟ إذا كنت تبحث عن استبدال cellspacing سمة الجدول، ثم border-spacing (مع border-collapse المعوقين) هو بديل. ومع ذلك، إذا كانت هناك حاجة إلى "هوامش" في الخلية، فأنا لست متأكدا من كيفية تحقيق ذلك بشكل صحيح باستخدام CSS. الاختراق الوحيد الذي يمكنني التفكير فيه هو استخدام padding على النحو الوارد أعلاه، تجنب أي تصفيف من الخلايا (ألوان الخلفية، والحدود، وما إلى ذلك) وبدلا استخدام الحاوية Divs داخل الخلايا لتنفيذ مثل هذا التصميم.

أنا لست خبيرا من CSS، لذلك يمكن أن أكون مخطئا في ما سبق (والذي سيكون رائعا أن أعرف! أنا أيضا أود أيضا حل مذكرات خلية الجدول).

هتافات!

إذا لم تتمكن من استخدام الحشو (على سبيل المثال لديك حدود في TD) جرب هذا

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

أدرك أن هذا متأخرا تماما، ولكن بالنسبة للسجل، يمكنك أيضا استخدام محددات CSS للقيام بذلك (القضاء على الحاجة إلى أنماط مضمنة.) تطبق CSS الحشو على العمود الأول من كل صف:

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

وهذا سيكون HTML الخاص بك، sans css!:

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

يسمح هذا بتميز أكثر أناقة، خاصة في الحالات التي تحتاج فيها إلى القيام بالكثير من التنسيق المحدد مع CSS.

لا يعمل الهامش لسوء الحظ على الخلايا الفردية، ومع ذلك، يمكنك إضافة أعمدة إضافية بين الخلاياتين التي ترغب في وضع مساحة بين ... خيار آخر هو استخدام حدود بنفس اللون مثل الخلفية ...

يمكنك ببساطة فعل ذلك:

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

لا يلزم CSS :) هذا 10px هو الفضاء الخاص بك.

يحاول padding-right. وبعد أنت غير مسموح لك بوضع marginبين الخلايا.

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

استخدام طي الحدود: منفصلة؛ لم تنجح من أجلي، لأنني بحاجة فقط إلى هامش داخل خلايا الطاولة وليس على جانبي الجدول.

لقد توصلت إلى الحل التالي:

-CSS.

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

هذا الحل يعمل tdالتي تحتاج إلى حد سواء border و padding للتصميم.
(تم اختباره على Chrome 32، أي 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>

لا يمكنك واحدة من الأعمدة الفردية في خلية بهذه الطريقة. في رأيي، خيارك الأفضل هو إضافة style='padding-left:10px' في العمود الثاني وتطبيق الأنماط على Div أو عنصر داخلي. وبهذه الطريقة يمكنك تحقيق وهم مساحة أكبر.

إذا كان لديك سيطرة على عرض الجدول، فقم بإدخال حشو - يسارا على جميع خلايا الجدول وإدراج هامش سلبي - يسارا على الطاولة بأكملها.

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

table td {
    padding-left: 20px;
}

ملاحظة، يحتاج عرض الجدول إلى تضمين عرض الحشو / الهامش. باستخدام ما ورد أعلاه كمثال، سيكون العرض المرئي للجدول 700 بكسل.

هذا ليس أفضل حل إذا كنت تستخدم الحدود على خلايا الجدول الخاصة بك.

المحلول

لقد وجدت أن أفضل طريقة لحل هذه المشكلة كانت مزيجا من التجربة والخطأ وقراءة ما كتبه قبل:

http://jsfiddle.net/mg4hd/


كما ترون أن لدي بعض الأشياء صعبة للغاية مستمرة ... ولكن كيكر الرئيسي للحصول على هذا يبحث جيدا:

العنصر الأصل (UL): حدود الحدود: منفصلة؛ تباعد الحدود: .25EM؛ هامش اليسار: -.25EM؛
عناصر الأطفال (LI): عرض: خلية الجدول؛ العمودي المحاذاة: وسط؛

لغة البرمجة

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

CSS.

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

بعد حل CIAN الخاص بوضع حدود بدلا من الهامش، اكتشفت أنه يمكنك تعيين لون الحدود للشفافية لتجنب الاضطرار إلى اللون مطابقة الخلفية. يعمل في FF17، IE9، كروم V23. يبدو وكأنه حل لائق شريطة أن لا تحتاج أيضا إلى حد حقيقي.

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

باستخدام الحشو غير صحيح في القيام بذلك، قد يغير مظهره لكنه ليس ما تريده. هذا قد يحل مشكلتك.

يمكنك استخدام كل منهما:

padding-right:10px;

padding-right:10%;

ولكن من الأفضل استخدامها مع %.

إذا لم يعمل الحشو من أجلك، فإن العمل الآخر هو إضافة أعمدة إضافية وتعيين هامش عبر العرض باستخدام <colgroup>. وبعد لم تكن أي من حلول الحشو المذكورة أعلاه لأنني كنت أحاول إعطاء حدود الخلية نفسها هامش، وهذا هو ما يحل المشكلة في النهاية:

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

نمط حدود خلايا الطاولة باستخدام: الأطفال NTH- بحيث يبدو أن الأعمدة الثانية والثالثة عمود واحد.

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; }
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top