[Html] خاصية الحد الأقصى لنصف قطر CSS3 وحدوث الانهيار: لا يختل الانهيار. كيف يمكنني استخدام نصف قطر الحدود لإنشاء جدول مطوي بزاوية مستديرة؟


Answers

تعمل الطريقة التالية (تم اختبارها في Chrome) باستخدام box-shadow 1px بدلاً من الحد "الحقيقي".

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}
Question

تحرير - العنوان الأصلي: هل هناك طريقة بديلة لتحقيق border-collapse:collapse في CSS (من أجل الحصول على جدول زاوية دائري منهار)؟

منذ أن تبين أن مجرد الحد من حدود الجدول لا يحل المشكلة الجذرية ، فقد قمت بتحديث العنوان لتعكس المناقشة بشكل أفضل.

أحاول إنشاء جدول بزاوية مستديرة باستخدام خاصية border-radius . أنماط الجدول التي أستخدمها تبدو كما يلي:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

ها هي المشكلة. وأريد أيضًا تعيين border-collapse:collapse الملكية ، وعندما يتم تعيين border-radius لم يعد يعمل. هل هناك طريقة تستند إلى CSS يمكن أن أحصل على نفس التأثير مثل border-collapse:collapse بدون استخدامه فعليًا؟

التعديلات:

لقد قمت بعمل صفحة بسيطة لإثبات المشكلة here (Firefox / Safari فقط).

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

ملخص الحلول المقترحة:

لا يعمل عمل الطاولة مع عنصر آخر مع زوايا مستديرة لأن زوايا المائدة في الجدول "تنزف من خلال".

لا يؤدي تحديد عرض الحدود إلى 0 إلى طي الجدول.

لا تزال زوايا td القاع مربعة بعد تعيين cellspacing إلى صفر.

استخدام JavaScript بدلاً من ذلك - يعمل عن طريق تجنب المشكلة.

الحلول الممكنة:

يتم إنشاء الجداول في PHP ، لذلك يمكنني فقط تطبيق فئة مختلفة على كل فئة من t / tds الخارجي ونمط كل زاوية على حدة. أفضل أن لا أفعل ذلك ، حيث أنه ليس أنيقًا جدًا وألمًا كبيرًا للتطبيق على جداول متعددة ، لذا يرجى متابعة تقديم الاقتراحات.

الحل المحتمل 2 هو استخدام JavaScript (jQuery ، على وجه التحديد) لتمييز الزوايا. هذا الحل يعمل أيضا ، ولكن لا يزال ليس تماما ما أبحث عنه (وأنا أعلم أنني من الصعب إرضاءه). لدي حجزان:

  1. هذا موقع خفيف جدًا ، وأرغب في الحفاظ على جافا سكريبت إلى الحد الأدنى
  2. جزء من النداء أن استخدام دائرة نصف قطرها الحدود بالنسبة لي هو التدهور الرشيق والتعزيز التدريجي. باستخدام دائرة نصف قطرها الحدودية لجميع الزوايا الدائرية ، أتمنى أن يكون لديك موقع مستدير دائمًا في المتصفحات المعتمدة على CSS3 وموقعًا ثابتًا بشكل مستمر في مناطق أخرى (أنا أبحث عنك ، IE).

أعلم أن محاولة القيام بذلك مع CSS3 اليوم قد تبدو بلا داع ، لكن لدي أسباب. كما أود أن أشير إلى أن هذه المشكلة هي نتيجة لمواصفات w3c ، وليس لدعم CSS3 ضعيف ، لذا فإن أي حل سيظل مفيدًا ومفيدًا عندما يكون CSS3 أكثر دعمًا على نطاق واسع.




حاولت استخدام الحل البديل باستخدام العناصر الزائفة :before و :after على thead th:first-child and thead th:last-child

في تركيبة مع التفاف الجدول مع <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

انظر jsFiddle

يعمل لي في الكروم (13.0.782.215) دعني أعرف ما إذا كان هذا يناسبك في المتصفحات الأخرى.




نصف قطر الحدود يتم دعمه رسميًا الآن. لذلك ، في جميع الأمثلة المذكورة أعلاه قد تسقط البادئة "-moz-".

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




أنا جديد مع HTML و CSS وكنت أبحث أيضًا عن حل لهذا ، ما أجده هنا.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

أحاول ذلك ، أخمن ما يعمل :)




في الواقع يمكنك إضافة table الخاص بك داخل div كما المجمع. ثم قم بتعيين رموز CSS إلى غلاف:

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}



هل حاولت استخدام table{border-spacing: 0} بدلاً من table{border-collapse: collapse} ؟؟




وكما قال إيان ، فإن الحل هو وضع الجدول داخل div ووضعه على النحو التالي:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

مع overflow:hidden ، لن تنزف زوايا مربعة من خلال div.




لا تعمل الإجابات المقدمة إلا عندما لا تكون هناك حدود حول الطاولة ، والتي تكون محدودة للغاية!

لديّ ماكرو في SASS للقيام بذلك ، والذي يدعم الحدود الخارجية والداخلية بالكامل ، ويحقق نفس التصميم مثل انهيار الحدود: الانهيار بدون تحديده فعليًا.

تم اختباره في FF / IE8 / Safari / Chrome.

يعطي حدود مستديرة لطيفة في CSS خالص في جميع المتصفحات ولكن IE8 (يحط في رشيقة) منذ IE8 لا يدعم دائرة نصف قطرها الحدود :(

قد تتطلب بعض المتصفحات القديمة بادئات بائع للعمل مع border-radius ، لذلك لا تتردد في إضافة تلك البادئات إلى شفرتك عند الضرورة.

هذه الإجابة ليست أقصر - لكنها تعمل.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

لتطبيق هذا النمط ببساطة تغيير الخاص بك

<table>

علامة على ما يلي:

<table class="roundedTable">

وتأكد من تضمين أنماط CSS الواردة أعلاه في HTML الخاص بك.

أتمنى أن يساعدك هذا.




بدأت بتجربة "display" ووجدت أن: border-radius ، border ، margin ، padding ، in a table are displayed with:

display: inline-table;

فمثلا

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

لكننا نحتاج إلى تحديد width كل عمود

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}



كتبت للتو مجموعة مجنونة من CSS لهذا يبدو أنه يعمل بشكل مثالي:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/