خاصية border-radius في CSS3 و border-collapse:collapse لا يختلطان.كيف يمكنني استخدام border-radius لإنشاء جدول مطوي بزوايا مستديرة؟

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

سؤال

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

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

أحاول عمل طاولة ذات زوايا مستديرة باستخدام CSS3 border-radius ملكية.تبدو أنماط الجدول التي أستخدمها كما يلي:

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

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

التعديلات:

لقد قمت بإنشاء صفحة بسيطة لتوضيح المشكلة هنا (فايرفوكس/سفاري فقط).

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

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

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

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

قاع td لا تزال الزوايا مربعة بعد ضبط تباعد الخلايا على الصفر.

إن استخدام JavaScript بدلاً من ذلك يعمل على تجنب المشكلة.

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

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

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

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

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

هل كانت مفيدة؟

المحلول

اكتشفتها.عليك فقط استخدام بعض المحددات الخاصة.

كانت مشكلة تقريب زوايا الجدول هي أن عناصر td لم تصبح مستديرة أيضًا.يمكنك حل ذلك عن طريق القيام بشيء مثل هذا:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

الآن يتم تقريب كل شيء بشكل صحيح، باستثناء أنه لا تزال هناك مشكلة border-collapse: collapse كسر كل شيء.الحل هو تعيين cellspacing="0" في HTML بدلاً من ذلك (شكرًا، جويل).

نصائح أخرى

تعمل الطريقة التالية (تم اختبارها في 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;
}

إذا كنت تريد حلاً لـ CSS فقط (لا داعي لتعيين cellspacing=0 في HTML) يسمح بحدود 1 بكسل (والتي لا يمكنك فعلها باستخدام border-spacing: 0 الحل)، أفضل القيام بما يلي:

  • تعيين أ border-right و border-bottom لخلايا الجدول الخاص بك (td و th)
  • إعطاء الخلايا في السطر الاول أ border-top
  • إعطاء الخلايا في العمود الأول أ border-left
  • باستخدام first-child و last-child المحددات، حول الزوايا المناسبة لخلايا الجدول في الزوايا الأربع.

انظر التجريبي هنا.

بالنظر إلى HTML التالي:

انظر المثال أدناه:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         
<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

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

ربما يتعين عليك وضع عنصر آخر حول الطاولة وتصميمه بحدود مستديرة.

ال مشروع العمل يحدد ذلك border-radius لا ينطبق على عناصر الجدول عندما تكون قيمة border-collapse يكون collapse.

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

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

مع overflow:hidden, ، لن تتسرب الزوايا المربعة عبر القسم.

على حد علمي، الطريقة الوحيدة التي يمكنك القيام بها هي تعديل جميع الخلايا كما يلي:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

ومن ثم الحصول على الحدود في الأسفل والظهر الأيمن

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-child غير صالح في IE6، ولكن إذا كنت تستخدم border-radius أفترض أنك لا تهتم.

يحرر:

بعد الاطلاع على صفحة المثال الخاصة بك، يبدو أنك قد تتمكن من حل هذه المشكلة باستخدام تباعد الخلايا والحشو.

الحدود الرمادية السميكة التي تراها هي في الواقع خلفية الجدول (يمكنك رؤية ذلك بوضوح إذا قمت بتغيير لون الحدود إلى اللون الأحمر).إذا قمت بتعيين تباعد الخلايا على صفر (أو ما يعادله: td, th { margin:0; }) سوف تختفي "الحدود" الرمادية.

تحرير 2:

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

لقد حاولت الحل باستخدام العناصر الزائفة :before و :after على ال thead th:first-child و 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

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

كان لي نفس المشكلة.يزيل border-collapse تماما واستخدام:cellspacing="0" cellpadding="0"في وثيقة HTML.مثال:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

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

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

table {
  border-collapse: collapse;
}

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

لدي ماكرو في 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 الخاص بك.

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

للحصول على جدول محدد وقابل للتمرير، استخدم هذا (استبدال المتغيرات، $ نصوص البداية)

إذا كنت تستخدم thead, tfoot أو th, ، فقط استبدل tr:first-child و tr-last-child و td معهم.

#table-wrap {
  border: $border solid $color-border;
  border-radius: $border-radius;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

لغة البرمجة:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>

لقد كتبت للتو مجموعة مجنونة من 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 !*/

الحل مع طي الحدود: منفصل للجدول والعرض: جدول مضمّن لـ tbody وthead.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

أنا جديد في استخدام 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
}

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

وجدت هذه الإجابة بعد مواجهة نفس المشكلة، لكنها وجدت أنها بسيطة جدًا:فقط أعط الجدول تجاوزًا: مخفيًا

لا حاجة لعنصر التغليف.من المؤكد أنني لا أعرف ما إذا كان هذا سينجح قبل 7 سنوات عندما تم طرح السؤال في البداية، لكنه يعمل الآن.

طاولة ذات زوايا مستديرة وخلايا ذات حدود.استخدام @ رامون تاياج حل.

المفتاح هو الاستخدام border-spacing: 0 كما يشير.

الحل باستخدام SCSS.

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

لقد بدأت تجربة "العرض" ووجدت أن: border-radius, border, margin, padding, ، في table يتم عرضها مع:

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;
}

فيما يلي مثال حديث لكيفية تنفيذ جدول بزوايا مستديرة من http://medialoot.com/preview/css-ui-kit/demo.html.إنه يعتمد على المحددات الخاصة التي اقترحها جويل بوتر أعلاه.كما ترون، فهو يتضمن أيضًا بعض السحر لجعل IE سعيدًا بعض الشيء.يتضمن بعض الأنماط الإضافية لتبديل لون الصفوف:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

أفعل دائمًا بهذه الطريقة باستخدام Sass

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

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

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

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