Як додати радіус кордону на рядок таблиці

Хтось знає, як стилізувати тр так, як нам подобається?

Я використав обвалення кордону на столі, після цього tr може відобразити суцільну межу 1px, яку я їм даю.

Однак коли я спробував -moz-border-radius, це не працює. Навіть простий запас не працює.

Ви можете застосовувати радіус межі лише до td, а не до tr або таблиці. Я обминув це питання круглими кутовими столами, використовуючи наступні стилі:

table { border-collapse: separate; }
td { border: solid 1px #000; }
tr:first-child td:first-child { border-top-left-radius: 10px; }
tr:first-child td:last-child { border-top-right-radius: 10px; }
tr:last-child td:first-child { border-bottom-left-radius: 10px; }
tr:last-child td:last-child { border-bottom-right-radius: 10px; }

Обов’язково введіть усі префікси постачальника. Ось приклад цього в дії .

Фактичний інтервал між рядками

Це стара нитка, але я помітив, читаючи коментарі з ОП щодо інших відповідей, які, мабуть, первісну мету мали border-radiusна рядах та прогалини між рядками. Не здається, що нинішні рішення саме так і роблять. Відповідь theazureshadow спрямовується в правильному напрямку, але, здається, потрібно трохи більше.

Для тих, хто цікавиться такими, ось загадка, яка розділяє рядки і застосовує радіус до кожного ряду. (ПРИМІТКА. Наразі Firefox має помилку у відображенні / відсіканні background-colorна прикордонних радіусах .)

Код такий (і як зазначалося theazureshadow, для попередньої підтримки браузера border-radiusдодані різні префікси постачальника для потреби).

table { 
    border-collapse: separate; 
    border-spacing: 0 10px; 
    margin-top: -10px; /* correct offset on first border spacing if desired */
}
td {
    border: solid 1px #000;
    border-style: solid none;
    padding: 10px;
    background-color: cyan;
}
td:first-child {
    border-left-style: solid;
    border-top-left-radius: 10px; 
    border-bottom-left-radius: 10px;
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 10px; 
    border-top-right-radius: 10px; 
}

Інформація про бонус: border-radiusне впливає на таблиці з border-collapse: collapse;та встановлені рамки на tds. І не має значення , чи він border-radiusувімкнено table, trабо td- це ігнорується.

http://jsfiddle.net/Exe3g/

Елемент tr дійсно враховує радіус кордону. Може використовувати чисті HTML та CSS, без JavaScript.

Посилання JSFiddle: http://jsfiddle.net/pflies/zL08hqp1/10/

tr {
    border: 0;
    display: block;
    margin: 5px;
}
.solid {
    border: 2px red solid;
    border-radius: 10px;
}
.dotted {
    border: 2px green dotted;
    border-radius: 10px;
}
.dashed {
    border: 2px blue dashed;
    border-radius: 10px;
}

td {
    padding: 5px;
}

<table>
    <tr>
        <td>01</td>
        <td>02</td>
        <td>03</td>
        <td>04</td>
        <td>05</td>
        <td>06</td>
    </tr>
    <tr class='dotted'>
        <td>07</td>
        <td>08</td>
        <td>09</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr class='solid'>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
        <td>18</td>
    </tr>
    <tr class='dotted'>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
        <td>24</td>
    </tr>
    <tr class='dashed'>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
</table>

Я думаю, що руйнувати ваші кордони - це неправильно робити в цьому випадку. Згортання їх в основному означає, що межа між двома сусідніми клітинками стає спільною. Це означає, що незрозуміло, в якому напрямку він повинен кривитись із заданим радіусом.

Натомість ви можете надати прикордонний радіус двом лівим кутам першої ТД та двом правого кута останнього. Ви можете використовувати first-childта last-childселектори, як це запропоновано theazureshadow, але вони можуть погано підтримувати старіші версії IE. Можливо, буде простіше просто визначити класи, такі як .first-columnі .last-columnслужити цьому.

Згідно з Opera, стандарт CSS3 не визначає використання border-radiusTD. Мій досвід полягає в тому, що Firefox і Chrome підтримують його, але Opera цього не робить (не знаю про IE). Вирішення проблеми полягає в загортанні вмісту td у діві, а потім застосуванні border-radiusдо div.

Не намагаючись брати жодних кредитів тут, весь кредит надсилається до @theazureshadow за його відповідь, але мені особисто довелося адаптувати його для таблиці, в якій є декілька, <th>а не <td>для комірок першого ряду.

Я просто розміщую тут модифіковану версію на випадок, якщо хтось із вас хоче скористатися рішенням @ theazureshadow, але, як і я, <th>у першій є <tr>. Клас "reportTable" повинен застосовуватися лише до самої таблиці.

table.reportTable {
    border-collapse: separate;
    border-spacing: 0;
}

table.reportTable td {
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable td:last-child {
    border-right: solid gray 1px;
}

table.reportTable tr:last-child td{
    border-bottom: solid gray 1px;
}

table.reportTable th{
    border: solid gray 1px;
    border-style: solid none none solid;
    padding: 10px;
}

table.reportTable th:last-child{
    border-right: solid gray 1px;
    border-top-right-radius: 10px;
}

table.reportTable th:first-child{
    border-top-left-radius: 10px;
}

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

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

Не соромтесь коригувати прокладки, радіуси тощо, відповідно до ваших потреб. Сподіваюся, що допомагає людям!

Я виявив, що додавання радіуса кордону до таблиць, trs та tds, здається, не працює на 100% в останніх версіях Chrome, FF та IE. Що я роблю замість цього, я загортаю таблицю з дівом і кладу на неї радіус межі.

<div class="tableWrapper">
  <table>
    <tr><td>Content</td></tr>
  <table>
</div>

.tableWrapper {
  border-radius: 4px;
  overflow: hidden;
}

Якщо вашого столу немає width: 100%, ви можете зробити свою обгортку float: left, просто пам’ятайте, щоб очистити її.

Використовуйте кордон-колапс: окремо; і граничний інтервал: 0; але використовуйте лише межі праворуч і кордон внизу для tds, при цьому кордон зверху застосовується до th, а лівий прикордонний застосовується лише до tr td: nth-child (1).

Потім можна застосувати радіус кордону до кутових tds (використовуючи nth-child для їх пошуку)

https://jsfiddle.net/j4wm1f29/

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
  <tr>
    <td>item 1</td>
    <td>item 2</td>
    <td>item 3</td>
  </tr>
</table>

table {
  border-collapse: seperate;
  border-spacing: 0;
}

tr th,
tr td {
  padding: 20px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

tr th {
  border-top: 1px solid #000;
}

tr td:nth-child(1),
tr th:nth-child(1) {
  border-left: 1px solid #000;
}

/* border radius */
tr th:nth-child(1) {
  border-radius: 10px 0 0 0;
}

tr th:nth-last-child(1) {
  border-radius: 0 10px 0 0;
}

tr:nth-last-child(1) td:nth-child(1) {
  border-radius: 0 0 0 10px;
}

tr:nth-last-child(1) td:nth-last-child(1) {
  border-radius: 0 0 10px 0;
}

Або скористайтеся полем-тінню, якщо стіл обвалиться

Усі відповіді занадто довгі. Найпростіший спосіб додати радіус межі до елемента таблиці, який приймає кордон як властивість, - це радіус межі з переповненням: приховано.

border: xStyle xColor xSize;
border-collapse: collapse;
border-radius: 1em;
overflow: hidden;