كيفية إصلاح صف العنوان في الجدول باستخدام CSS؟[مغلق]

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

  •  26-12-2019
  •  | 
  •  

سؤال

لقد قمت بإنشاء جدول بدون حدود في الأعمدة، وأعطيت حدًا بمقدار 1 بكسل فقط في الصفوف.

لقد استخدمت خاصية "الحدود المطوية" ثم أعطيت جميع الصفوف حدًا يبلغ 1 بيكسل.

لكن مشكلتي هي أن صف العناوين أطول قليلاً من بقية الجدول؟

هل يعرف أحد كيف يمكنني إصلاحه؟

شكرا لك مقدما.

كود أتش تي أم أل:

<!DOCTYPE html>
<html>
<title>web programming project 2</title>
<link rel="stylesheet" type="text/css" href="exe2CSS1.css">
<body>


<table class=outlined>
<tr id=headline>
<th class=side>Item</th>
<th class=side>Manufacturer</th>
<th class=side>Size</th>
<th class=center>Unit Price</th>
<th class=center>Quantity</th>
<th class=center>Total Price</th>
</tr>

<tr  class=firstCol>
<td class=side>Corn Flakes</td>
<td class=side>Kellogg's</td>
<td class=side>18 0z</td>
<td class=center>2.5</td>
<td class=center>1</td>
<td class=center>2.5</td>
</tr>


<tr class=secondCol>
<td class=side>Solid White Tuna</td>
<td class=side>Starkist</td>
<td class=side>5 oz</td>
<td class=center>2.79</td>
<td class=center>2</td>
<td class=center>5.58</td>
</tr>


</table>

</body>
</html>

رمز المغلق:

.outlined
{
font:13px Tahoma;
width: 75%;
border-collapse: collapse;
}

tr {
border: 1px solid white;
}

.secondCol{
background-color: #eeeff2
}

.firstCol{
background-color: #dfe1e7
}

.center{
text-align: center;
}

.side{
text-align: left
}

#headline{
background-color: #687291;
color: white;
}
هل كانت مفيدة؟

المحلول

أنت تفتقد علامات الاقتباس حول قيمة السمات، كما فاتك الإغلاق </th> في الصف الأول لـ "السعر الإجمالي" (لديك <th> بدلاً من)

عرض jsFiddle

<tr id="headline">
    <th class="side">Item</th>
    <th class="side">Manufacturer</th>
    <th class="side">Size</th>
    <th class="center">Unit Price</th>
    <th class="center">Quantity</th>
    <th class="center">Total Price</th>
</tr>

نصائح أخرى

مرحبًا، لم يتم إغلاق علامتك الأخيرة بشكل صحيح "<th class=center>Total Price<th>"

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