Jak dodać promień obramowania w wierszu tabeli

Czy ktoś wie, jak stylizować tr tak, jak lubimy?

Użyłem border-collapse na stole, po tym tr's może wyświetlić 1px solidną ramkę, którą im daję.

Jednak kiedy próbowałem -moz-border-radius, to nie działa. Nawet prosty margines nie działa.

Możesz zastosować border-radius tylko do td, a nie tr lub table. Omówiłem to w przypadku zaokrąglonych stołów narożnych, używając następujących stylów:

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

Pamiętaj o podaniu wszystkich przedrostków dostawców. Oto przykład tego w akcji .

Rzeczywiste odstępy między wierszami

To jest stary wątek, ale zauważyłem, że czytałem komentarze z PO na temat innych odpowiedzi, które pierwotnie miały najwyraźniej mieć border-radiusna rzędach i lukach między rzędami. Nie wydaje się, że obecne rozwiązania dokładnie to robią. Odpowiedź theazureshadow zmierza we właściwym kierunku, ale wydaje się, że potrzebuje trochę więcej.

Dla zainteresowanych tym jest skrzypce, które oddziela rzędy i stosuje promień do każdego rzędu. (UWAGA: Firefox ma obecnie błąd w wyświetlaniu / przycinaniu background-colorna promieniach obramowania ).

Kod jest następujący (i jak zauważył theazureshadow, dla wcześniejszej obsługi przeglądarek border-radiusdodano różne prefiksy dostawców dla potrzeb).

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

Informacje o bonusach: border-radiusnie mają wpływu na stoły z border-collapse: collapse;ustawioną ramką td. I nie ma znaczenia, czy border-radiusjest włączone table, trczy td- jest ignorowane.

http://jsfiddle.net/Exe3g/

Element tr honoruje border-radius. Może używać czystego html i css, bez javascript.

Link do 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>

Uważam, że w tym przypadku zawalenie granic jest złą rzeczą. Zwinięcie ich w zasadzie oznacza, że ​​granica między dwiema sąsiednimi komórkami staje się wspólna. Oznacza to, że nie jest jasne, w którym kierunku powinien zakrzywiać się przy danym promieniu.

Zamiast tego możesz nadać promień obramowania dwóm lewym rogom pierwszego niszczyciela czołgów i dwóm prawym rogom ostatniego. Możesz używać first-childi last-childselektorów zgodnie z sugestią theazureshadow, ale mogą one być słabo obsługiwane przez starsze wersje IE. Może być łatwiej po prostu zdefiniować klasy, takie jak .first-columni .last-columnsłużyć temu celowi.

Według Opery standard CSS3 nie definiuje użycia border-radiusna TD. Z mojego doświadczenia wynika, że ​​Firefox i Chrome go obsługują, ale Opera nie (nie wiem o IE). Sposób obejścia problemu: zawiń zawartość td w element div, a następnie zastosuj go border-radiusdo elementu div.

Nie próbując brać tutaj żadnych kredytów, wszystkie zasługi należą do @theazureshadow za jego odpowiedź, ale osobiście musiałem dostosować ją do tabeli, która ma trochę <th>zamiast <td>komórek pierwszego rzędu.

Po prostu zamieszczam tutaj zmodyfikowaną wersję na wypadek, gdyby niektórzy z was chcieli użyć rozwiązania @ theazureshadow, ale tak jak ja, mam trochę <th>w pierwszej <tr>. Klasę „reportTable” należy zastosować tylko do samej tabeli .:

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

Możesz dowolnie dopasować wyściółki, promienie itp. Do swoich potrzeb. Mam nadzieję, że to pomaga ludziom!

Zauważyłem, że dodanie border-radius do tabel, trs i tds nie działa w 100% w najnowszych wersjach Chrome, FF i IE. Zamiast tego owijam tabelę elementem div i umieszczam na nim border-radius.

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

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

Jeśli nie masz stołu width: 100%, możesz zrobić opakowanie float: left, pamiętaj tylko, aby go wyczyścić.

Użyj border-collapse: seperate; i border-spacing: 0; ale używaj tylko border-right i border-bottom dla tds, z border-top zastosowanym do th i border-left zastosowanym tylko do tr td: nth-child (1).

Następnie możesz zastosować promień obramowania do narożnych tds (używając n-tego dziecka, aby je znaleźć)

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

Lub użyj cienia pola, jeśli tabela ma zwinięcie

Wszystkie odpowiedzi są zdecydowanie za długie. Najłatwiejszym sposobem dodania promienia obramowania do elementu tabeli, który akceptuje border jako właściwość, jest zrobienie border radius z overflow: hidden.

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