CellPadding في خلية جدول HTML واحدة

Question

هل من الممكن الحصول على حشوة خلية في خلية واحدة فقط مقابل جدول HTML بأكمله؟

Answer 1

مجرد نمط الخلية باستخدام CSS:

<table border='1'>
    <tr>
    <td style="padding: 50px;">cell1</td>
    </tr>
    <tr>
    <td>cell2</td>
    </tr>
</table>

Answer 2

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

في المثال الوارد في السؤال، سيصبح هذا:

<table border='1'>
 <tr>
  <td>
   <table cellpadding="50">
    <tr>
     <td>cell1</td>
    </tr>
   </table>
  </td>
 </tr>
 <tr>
  <td>cell2</td>
 </tr>
</table>

Answer 3

لسوء الحظ، إذا كنت تشير إلى استخدام <table cellpadding="0">, ، كما هو إعداد على نطاق الجدول. إذا كنت تريد تطبيق الحشو على خلية واحدة فقط، فستضطر إلى إضافة فئة وتعيينها padding قيمة بهذه الطريقة.

Answer 4

يمكنك تجربة هذا CSS.

الجدول باستخدام DIV.

لغة البرمجة

  <div class="divTable">
    <div class="divTableBody">
        <div class="divTableRow">
            <div class="divTableCell">1</div>
            <div class="divTableCell splcell">2</div>
            <div class="divTableCell">3</div>
        </div>
        <div class="divTableRow">
            <div class="divTableCell">4;</div>
            <div class="divTableCell">5</div>
            <div class="divTableCell">6;</div>
        </div>
    </div>
</div>

CSS.

.divTable{
    display: table;
    width: 100%;
}
.divTableRow {
    display: table-row;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
}
.divTableCell, .divTableHead {
    border: 1px solid #999999;
    display: table-cell;
    padding: 3px 10px;
}
.divTableHeading {
    background-color: #EEE;
    display: table-header-group;
    font-weight: bold;
}
.divTableFoot {
    background-color: #EEE;
    display: table-footer-group;
    font-weight: bold;
}
.divTableBody {
    display: table-row-group;
}
.splcell{
     background:red;
     color:#fff;
     font-weight:bold;
     text-align:center;
     padding: 5px;
}

باستخدام الفئة "SPLCELL" يمكننا أن نناسب الخلية الفردية.

.splcell{
       background:red;
       color:#fff;
       font-weight:bold;
       text-align:center;
    }