CSS الجدول التصميم
https://stackoverflow.com/questions/284475
-
08-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
وأنا بحاجة إلى أسلوب جدول لديك تدوير الزوايا.
وأنا مجرد النظر في أفضل السبل لتذهب عنه:
وعادة عندما أسلوب لشعبة لتدوير الزوايا، وأنا استخدم 2 عناصر div مع تعليقات فارغة في أعلى وأسفل، وتطبيق التحجيم وصورة خلفية CSS لهم.
والجدول، ولكن لديه الحدود الداخلية، لذلك كنت قد لمحاذاة بعناية خطوط عمودية في الصور BG الزاوية، لتتناسب مع حدود الخلية الحقيقية.
هل هذا واضح جدا حتى الآن؟
وهكذا كنت أتساءل كيف يمكن للآخرين أن هذا النهج. أعتقد أن أفضل شيء يمكن القيام به هو استخدام واحد فقط كاملة حجم ثابت صورة الخلفية والحدود وقبل كل شيء، وتراكب الجدول بلا حدود على القمة. والجدول يكون دائما نفس الحجم بعد كل شيء.
ويمكن لأي شخص أن يفكر في طريقة أفضل؟
المحلول
وكنت أفضل تقديم صورة الخلفية فقط مع الزوايا، وليس الحدود. تطبيق فئة إلى أعلى اليسار، أعلى يمين، أسفل الخلية اليمنى اليسرى وأسفل، لتحديد أن صورة الزوايا الخلفية ينبغي أن تستخدم.
وعلى غرار الحدود مع المغلق. لا وضعها في صورة الخلفية.
في نهجكم، عليك دائما ستعمل في نهاية المطاف وجود خطوط عمودية في صورة الخلفية الخاصة بك لا تتطابق مع حدود خلايا الجدول الفعلية.
نصائح أخرى
25 طرق للقيام بذلك .... HTTP: / /www.cssjuice.com/25-rounded-corners-techniques-with-css/
في الواقع، هناك الكثير من الطرق للقيام بذلك.
هل حاولت http://www.roundedcornr.com/ ؟
وتفعل شيئا من هذا القبيل ...
وXHTML: (! آسف كان أولا إزالة '<' كما انها لن تسمح لي بعد ذلك بشكل طبيعي، لإصلاح هذه JEFF)
table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>Incoming calls</th>
<th>National calls</th>
<th>Calls to US & Canada</th>
<th>Calls to other Phones</th>
<th>Calls to other Countries</th>
<th>SMS text messages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Select</td>
<td>country</td>
<td>from</td>
<td>dropdown</td>
<td>list</td>
<td>above</td>
</tr>
</tbody>
</table>
وCSS: #pricing { الخط الوزن: جريئة. مواءمة النصوص: مركز }
#pricing thead
{
background-image:url("images/pricing_top.gif");
background-position:top;
background-repeat:no-repeat;
padding:10px 0 0 /* replace 10px with the height of pricing_top.gif */
}
#pricing th
{
background-image:url("images/pricing_header_bg.gif");
background-repeat:repeat-y;
border-bottom:1px solid #c3c2c2;
width:100px /* replace 100px with the width of pricing_header_bg.gif */
}
#pricing tbody
{
background-image:url("images/pricing_bottom.gif");
background-position:bottom;
background-repeat:no-repeat;
padding:0 0 10px /* replace 10px with the height of pricing_bottom.gif */
}
#pricing td
{
background-image:url("images/pricing_cell_bg.gif");
background-repeat:repeat-y;
width:100px /* replace 100px with the width of pricing_cell_bg.gif */
}
ولكن العائق الوحيد هو أن لديك لإنشاء 4 صور، ولكن هذا لا ينبغي أن تستغرق وقتا طويلا. سوف تحتاج أيضا إلى إضافة فئة إلى الخلية الأخيرة في كل صف إذا كنت ترغب في إضافة لشبح الهبوط على حق وعادل تغييره من خلفية الصورة والممتلكات العرض وفقا لذلك.
واللعب الخروج من الفكرة الأصلية الخاصة بك، يمكنك إضافة فئة إلى كل خلية الزاوية تحول فعليا حدود المخالف كل منهما. هل يمكن بعد ذلك استخدام صورة خلفية ذات العرض الكامل في و
العناصر لحساب زوايا مدورة.وأما بقية الخلايا يمكن أن يكون لها حدودها قيد التشغيل، وسوف خطوط يصطف بشكل صحيح.
والمسألة الوحيدة المتبقية هو تعليل لذلك انتقد شبح الهبوط. هذا هو ممارسة مختلفة.
<الإضراب> هناك طريقة أفضل سيكون الشبكة 9 حيث لديك الزوايا الخلفية، وأعلى، أسفل، اليسار واليمين الخلفيات تكرار
<الإضراب><الإضراب> جدولك يذهب في الخلية 5
تحرير
وكما نشرت بعض في التعليقات لا يمكن تحقيق التأثير مع 9-الشبكة. ما عليك القيام به لنظام 12-شبكة (الذي يتكون من لي الآن :)
لايف تجريبي
و.
الرمز:
<ط> تحذير: انها ليست جميلة، ولكنها تعمل
<html>
<head>
<style>
.cell1 {background: #f8f8f8 url(images/cell1.gif) no-repeat left top; height: 10px; font-size: 1px;}
.cell2 {background: #f8f8f8 url(images/cell2.gif) repeat-x top; height: 10px; font-size: 1px; border-right: solid 1px #c3c2c2; font-weight:bold; }
.cell3 {background: #f8f8f8 url(images/cell3.gif) no-repeat right top; height: 10px; font-size: 1px;}
.cell4 {background: white url(images/cell4.gif) repeat-y left; border-bottom: solid 1px #c3c2c2; width: 13px; }
.cell5 {background-color: #f8f8f8; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:bold; border-bottom: solid 1px #c3c2c2; }
.cell6 {background: white url(images/cell6.gif) repeat-y right; border-bottom: solid 1px #c3c2c2; width: 18px; }
.cell7 {background: white url(images/cell7.gif) repeat-y left; width: 13px;}
.cell8 {background-color: white; padding: 5px; border-right: solid 1px #c3c2c2; font-weight:normal; }
.cell9 {background: white url(images/cell9.gif) repeat-y right; width: 18px;}
.cell10 {background: white url(images/cell10.gif) no-repeat left bottom; height: 17px;font-size: 1px; }
.cell11 {background: white url(images/cell11.gif) repeat-x bottom; border-right: solid 1px #c3c2c2; height: 17px; font-size: 1px; }
.cell12 {background: white url(images/cell12.gif) no-repeat right bottom; height: 17px;font-size: 1px; }
.lastcolumn, th.lastcolumn, td.lastcolumn {border-right: solid 0px #c3c2c2; }
</style>
</head>
<body>
<table id="pricing" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="cell1"></th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2"> </th>
<th class="cell2 lastcolumn"> </th>
<th class="cell3"></th>
</tr>
<tr>
<th class="cell4"> </th>
<th class="cell5">Incoming calls</th>
<th class="cell5">National calls</th>
<th class="cell5">Calls to US & Canada</th>
<th class="cell5">Calls to other Phones</th>
<th class="cell5">Calls to other Countries</th>
<th class="cell5 lastcolumn">SMS text messages</th>
<th class="cell6"> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="cell7"></td>
<td class="cell8">Select</td>
<td class="cell8">country</td>
<td class="cell8">from</td>
<td class="cell8">dropdown</td>
<td class="cell8">list</td>
<td class="cell8 lastcolumn">above</td>
<td class="cell9"></td>
</tr>
<tr>
<td class="cell10"></td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11"> </td>
<td class="cell11 lastcolumn"> </td>
<td class="cell12"></td>
</tr>
</tbody>
</table>
</body>
</html>
<ط> ملاحظة: هناك بعض المساحات غير كسر أن SO شرائط من التعليمات البرمجية. تحقق من التجريبي المعيشة للمزيد من المعلومات
واستمتع!
