تنسيق عمود الجدول

StackOverflow https://stackoverflow.com/questions/157770

  •  03-07-2019
  •  | 
  •  

سؤال

أحاول تنسيق عمود في ملف <table/> باستخدام أ <col/> عنصر.أستطيع أن أضع background-color, width, وما إلى ذلك، ولكن لا يمكن تعيين font-weight.لماذا لا يعمل؟

<table>
    <col style="font-weight:bold; background-color:#CCC;">
    <col>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>
هل كانت مفيدة؟

المحلول

بقدر ما أعرف، يمكنك فقط تنسيق ما يلي باستخدام CSS على ملف <col> عنصر:

  • لون الخلفية
  • حدود
  • عرض
  • الرؤية

هذا صفحة لديه مزيد من المعلومات.

هيرب على حق - من الأفضل تصفيفه <td>مباشرة.ما أفعله هو ما يلي:

<style type="text/css">
   #mytable tr > td:first-child { color: red;} /* first column */
   #mytable tr > td:first-child + td { color: green;} /* second column */
   #mytable tr > td:first-child + td + td { color: blue;} /* third column */
   </style>
   </head>
   <body> 
   <table id="mytable">
    <tr>
      <td>text 1</td>
      <td>text 2</td>
      <td>text 3</td>
    </tr>
    <tr>
      <td>text 4</td>
      <td>text 5</td>
      <td>text 6</td>
    </tr>
    </table>

هذا لن يعمل في IE ولكن.

نصائح أخرى

وأفضل رهان هو تطبيق التصميم الخاص بك مباشرة إلى العلامات <td>. لم يسبق لي ان تستخدم العلامة <col>، ولكن معظم المتصفحات تتيح لك تطبيق التنسيق في <table> ومستوى <td> / <th>، ولكن ليس في المستوى المتوسط. على سبيل المثال إذا كان لديك 

<table>
    <tr class="Highlight">
        <td>One</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>A</td>
        <td>B</td>
    </tr>
</table>

وبعد ذلك فإن هذه CSS لا تعمل 

tr.Highlight { background:yellow }

ولكن هذه الإرادة 

tr.Highlight td { background:yellow }

وأيضا: أفترض التعليمات البرمجية أعلاه هو فقط لأغراض العرض التوضيحي وأنك لن فعلا لتطبيق الأنماط مضمنة

.

وكنت قد يحتاج فقط هذا: 

tr td:first-child label {
    font-weight: bold;
}

والقراءة من خلال هذا كما كنت في محاولة لأسلوب الجدول بحيث العمود الأول سيكون النص الغامق والأخرى أربعة أعمدة سيكون النص العادي. يبدو باستخدام علامة عمود مثل وسيلة للذهاب ولكن في حين أتمكن من ضبط عرض الأعمدة مع عرض السمة الخط الوزن: وجريئة لا تعمل شكرا لافتا لي في اتجاه الحل. بواسطة التصميم كل td {font-weight: bold;} عناصر الدفتيريا وثم باستخدام محدد الأخوة المجاور لتحديد الأعمدة 2-5 وأسلوب اعادتهم الى وضعها الطبيعي td + td {font-weight: normal;} فويلا، ALLS جيد:)

هل حاولت تطبيق أسلوب من خلال فئة CSS؟

ويظهر التالية للعمل: 

<style type="text/css"> 
  .xx {
  background: yellow;
  color: red;
  font-weight: bold;
  padding: 0 30px;
  text-align: right;
}

<table border="1">
  <col width="150" />
  <col width="50" class="xx" />
  <col width="80" />
<thead>
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    </tr>
</tbody>
</table>

المرجعي للعنصر العقيد

ويجب أن يكون علامة col داخل علامة colgroup، قد يكون هذا ما تفعله مع هذه المشكلة.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top