باستخدام مركز محاذاة النص في Colgroup

Question

لدي جدول في صفحتي، يمكنني استخدام مجموعات colgroups لتنسيق جميع الخلايا في هذا العمود بنفس الطريقة، ويعمل جيدا للون الخلفية وكلها. ولكن لا يمكن أن يبدو أنه معرفة سبب عدم عمل مركز محاذاة النص. لا يمنع التركيز النص.

مثال:

<table id="myTable" cellspacing="5">
    <colgroup id="names"></colgroup>
    <colgroup id="col20" class="datacol"></colgroup>
    <colgroup id="col19" class="datacol"></colgroup>
    <colgroup id="col18" class="datacol"></colgroup>

    <thead>
        <th>&nbsp;</th>
        <th>20</th>
        <th>19</th>
        <th>18</th>
    </thead>
    <tbody>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

CSS:

#names {
    width: 200px;
}

#myTable .datacol {
    text-align: center;
    background-color: red;
}

Answer 1

فقط تنطبق مجموعة محدودة من خصائص CSS على الأعمدة, ، و text-align ليس واحدا منهم.

يرى "سر لماذا تنطبق أربع خصائص فقط على أعمدة الجدول" للحصول على وصف لماذا هذا هو الحال.

في مثالك البسيط، أسهل طريقة لإصلاحها ستكون لإضافة هذه القواعد:

#myTable tbody td { text-align: center }
#myTable tbody td:first-child { text-align: left }

من شأنه أن يتمركز جميع خلايا الجدول، باستثناء العمود الأول. هذا لا يعمل في IE6، ولكن في IE6 text-align هل في الواقع (خطأ) العمل على العمود. لا أعرف إذا كان IE6 يدعم جميع الخصائص، أو مجرد مجموعة فرعية أكبر.

أوه، و HTML الخاص بك غير صالح. <thead> يفتقد أ <tr>.

Answer 2

انظر سؤال مماثل: لماذا يتم السماح بأعمدة طاولة التصميم؟

يسمح لك فقط بضبط الحدود, معرفتي, العرض و الرؤية خصائص، نظرا لحقيقة أن الخلايا ليست نمسا مباشرا للأعمدة، فقط الصفوف.

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

حل آخر للمتصفحات الحديثة (أي IE6) هو استخدام بعض الفئات الزائفة. tr > td:first-child سيختار الخلية الأولى على التوالي. اوبرا، سفاري، كروم و فايرفوكس 3.2 يدعم أيضا :nth-child(n) محدد حتى تتمكن من استهداف أعمدة محددة.

يمكنك أيضا استخدام td+td لتحديد من العمود الثاني فصاعدا (فهي فعلا يعني "تحديد الكل td العناصر التي لديها واحدة td العنصر إلى يسارا). td+td+td يختار من العمود الثالث - يمكنك المتابعة في هذه الأزياء، خصائص طرحها. بصراحة رغم ذلك، ليس رمز رائع.

Answer 3

مع CSS التالية، يمكنك فقط إلحاق فئة واحدة أو أكثر إلى عنصر الجدول من أجل محاذاة أعمدةها وفقا لذلك.

CSS.

.col1-right td:nth-child(1) {text-align: right}
.col2-right td:nth-child(2) {text-align: right}
.col3-right td:nth-child(3) {text-align: right}

لغة البرمجة

<table class="col2-right col3-right">
  <tr>
    <td>Column 1 will be left</td>
    <td>Column 2 will be right</td>
    <td>Column 2 will be right</td>
  </tr>
</table>

مثال: http://jsfiddle.net/hhzsw/

Answer 4

بالإضافة إلى القيود المذكورة في إجابات أخرى، اعتبارا من فبراير 2018، لا تزال الرؤية: لا يزال الانهيار لا يعمل على الكولجروب في المتصفحات الكروم والكروم، بسبب وجود علة. يرى "CSS COL الرؤية: الانهيار لا يعمل على الكروم"لذلك أعتقد أن الخصائص القابلة للاستخدام حاليا هي مجرد حدود، خلفية، عرض (ما لم تكن تستخدم نوعا من polyfn إلى الكروم وغيرها من المتصفحات المستندة إلى الكروم). يمكن تعقب الخطأ في https://crbug.com/174167. .