Как добавить радиус границы в строку таблицы

Кто-нибудь знает, как стилизовать tr как нам нравится?

Я использовал border-collapse для таблицы, после этого tr может отображать сплошную границу 1px, которую я им даю.

Однако, когда я попробовал -moz-border-radius, это не сработало. Даже простая маржа не работает.

Вы можете применить только border-radius к td, но не к tr или table. Я обошел это для таблиц с закругленными углами, используя следующие стили:

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

Обязательно укажите все префиксы поставщиков. Вот пример этого в действии .

Фактическое расстояние между рядами

Это старый поток, но я заметил, что читал комментарии OP к другим ответам, которые, по-видимому, исходная цель заключалась 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;установленными границами tdи. И это не имеет значения , если border-radiusустановлен на table, trили td-It игнорируется.

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>

Я считаю, что в данном случае не следует нарушать границы. Их сворачивание в основном означает, что граница между двумя соседними ячейками становится общей. Это означает, что неясно, в каком направлении он должен изгибаться с учетом радиуса.

Вместо этого вы можете задать радиус границы для двух левых углов первого TD и двух правых углов последнего. Вы можете использовать first-childи last-childселекторы как предложено theazureshadow, но это может быть плохо поддерживается старыми версиями IE. Возможно, было бы проще просто определить классы, такие как .first-columnи, .last-columnдля этой цели.

Согласно Opera, стандарт CSS3 не определяет использование border-radiusTD. По моему опыту, Firefox и Chrome поддерживают его, а Opera - нет (не знаю об IE). Обходной путь - обернуть содержимое td в div, а затем применить border-radiusк нему.

Не пытаясь получить здесь какие-либо кредиты, вся заслуга @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;
}

Не стесняйтесь отрегулировать прокладки, радиусы и т. Д. В соответствии с вашими потребностями. Надеюсь, что это поможет людям!

Я обнаружил, что добавление border-radius к таблицам, trs и tds не работает на 100% в последних версиях Chrome, FF и IE. Вместо этого я оборачиваю таблицу элементом div и помещаю на него радиус границы.

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

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

Если вашей таблицы нет width: 100%, вы можете сделать свою обертку float: left, только не забудьте ее очистить.

Используйте border-collapse: seperate; и border-spacing: 0; но используйте только border-right и border-bottom для tds, причем border-top применяется к th, а border-left применяется только к 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;
}

Или используйте box-shadow, если таблица свернута

Все ответы слишком длинные. Самый простой способ добавить радиус границы к элементу таблицы, который принимает границу как свойство, - это задать радиус границы с помощью overflow: hidden.

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