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

Ответ 1

Вы можете применить только радиус границы к 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; }

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

Ответ 2

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

Это старый поток, но я заметил, что читал комментарии от 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; 
}

Ответ 3

Информация о бонусе: border-radius не влияет на таблицы с border-collapse: collapse; и границей на td. И не имеет значения, если border-radius установлен на table, tr или td -it проигнорирован.

http://jsfiddle.net/Exe3g/

Ответ 4

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

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

Ответ 5

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

Ответ 6

Элемент tr выполняет почетный радиус. Может использовать чистые html и css, не javascript.

JSFiddle link: 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>

Ответ 7

Я обнаружил, что добавление граничного радиуса в таблицы, 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, просто не забудьте очистить ее.

Ответ 8

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

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

Ответ 9

Или используйте тень окна, если таблица обрушилась