Tylko zaokrąglone rogi tabeli w CSS

86

Szukałem i szukałem, ale nie udało mi się znaleźć rozwiązania dla moich wymagań.

Mam zwykłą tabelę HTML. Chcę do tego mieć zaokrąglone rogi, bez używania obrazów lub JS, tj . Tylko czysty CSS . Lubię to:

Szkic układu tabeli

Zaokrąglone rogi komórek narożnych i 1pxgrube obramowanie komórek.

Jak dotąd mam to:

table {
  -moz-border-radius: 5px !important;
  border-collapse: collapse !important;
  border: none !important;
}
table th,
table td {
  border: none !important
}
table th:first-child {
  -moz-border-radius: 5px 0 0 0 !important;
}
table th:last-child {
  -moz-border-radius: 0 5px 0 0 !important;
}
table tr:last-child td:first-child {
  -moz-border-radius: 0 0 0 5px !important;
}
table tr:last-child td:last-child {
  -moz-border-radius: 0 0 5px 0 !important;
}
table tr:hover td {
  background-color: #ddd !important
}

Ale to pozostawia mnie bez granic dla komórek. Jeśli dodam ramki, nie są zaokrąglone!

Jakieś rozwiązania?

html css html-table rounded-corners Vishal Shah
źródło
1
Czy próbowałeś dodać border do elementów TD używając moz-border-radius? Należy również pamiętać, że to nie zadziała w IE, IE nadal będzie wyświetlać proste krawędzie.
Fermin
Patrząc na odpowiedzi i komentarze, nie jest jasne, czego chcesz: gdzie chcesz zaokrąglone rogi? tabela, komórki tabeli, tylko komórki w rogach tabeli?
BiAiB
3
Myślę, że to dość oczywiste z tytułu pytania, rogi stołu
Vishal Shah,
@VishalShah +1 za bardzo przydatne pytanie. Na ślepo używałem klasy zaokrąglonego narożnika jQuery UI przeznaczonej dla widżetów UI, ale zastosowałem ją do elementów tabeli i wszystko poszło prosto. Więc teraz mogę nadal używać mojego motywu interfejsu użytkownika jQuery z widgetem opartym na tabeli.
DavidHyogo

Odpowiedzi:

90

Wydaje się, że działa dobrze w FF i Chrome (nie testowałem żadnych innych) z oddzielnymi ramkami : http://jsfiddle.net/7veZQ/3/

Edycja: Oto stosunkowo czysta implementacja szkicu: 

table {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    -moz-border-radius:6px;
}

td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

th {
    background-color: blue;
    border-top: none;
}

td:first-child, th:first-child {
     border-left: none;
}
<table>
    <thead>
    <tr>
        <th>blah</th>
        <th>fwee</th>
        <th>spoon</th>
    </tr>
    </thead>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
    <tr>
        <td>blah</td>
        <td>fwee</td>
        <td>spoon</td>
    </tr>
</table>
Rozwiń fragment

http://jsfiddle.net/MuZzz/3577/

RoToRa
źródło
Nie do końca to, czego szukam. Jeśli usuniesz wypełnienie tabeli i zastosujesz border-radius tylko do komórek narożnych, otrzymasz obramowanie o grubości 2 pikseli, co jest brzydkie. Raczej nie ma żadnych granic.
Vishal Shah
3
Blisko. Komórki narożne również wymagały promienia obramowania. jsfiddle.net/JWb4T/1 Chociaż teraz widzisz niewielką lukę między krawędzią komórek narożnych a krawędzią tabeli. Można naprawić, zmniejszając promień obramowania komórek narożnych. Dzięki: D
Vishal Shah,
Cieszę się, że rozwiązałeś problem. Należy pamiętać, że first-childi last-childnie działa w IE6 / 7/8, ale mniejszy problem dla Ciebie, ponieważ nie robi border-radius. Oznacza to, że nie będziesz w stanie użyć CSS3Pie do naprawienia tego w IE - naprawi to border-radius, ale nie pierwsze / ostatnie dziecko.
Spudley,
Dodanie border-collapse: separate;do szablonu Zurb Ink rozwiązało to za mnie.
Johan Dettmar,
1
może to wyglądało dobrze 7 lat temu, ale dziś granice komórek nie łączą się za pomocą tego rozwiązania, więc wygląda okropnie.
rtaft
23

Dla mnie rozwiązanie Twitter Bootstrap wygląda dobrze. Wyklucza IE <9 (brak zaokrąglonych rogów w IE 8 i niższych), ale myślę, że to jest OK, jeśli tworzysz przyszłe aplikacje internetowe.

CSS / HTML:

table { 
    border: 1px solid #ddd;
    border-collapse: separate;
    border-left: 0;
    border-radius: 4px;
    border-spacing: 0px;
}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px; 
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;    
}
td {
    border-top: 1px solid #ddd;    
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}
<table>
  <thead>
    <tr><th>xxx</th><th>xxx</th><th>xxx</th></tr>
  </thead>
  <tbody>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
    <tr><td>xxx</td><td>xxx</td><td>xxx</td></tr>
  </tbody>
</table>
Rozwiń fragment

Możesz się tym bawić tutaj (na jsFiddle)

Lars Schinkel
źródło
17

Po pierwsze, będziesz potrzebować czegoś więcej niż tylko -moz-border-radiuswtedy, gdy chcesz obsługiwać wszystkie przeglądarki. Powinieneś określić wszystkie warianty, w tym zwykłe border-radius, w następujący sposób:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;

Po drugie, aby bezpośrednio odpowiedzieć na twoje pytanie, w border-radiusrzeczywistości nie wyświetla obramowania; po prostu ustala, jak wyglądają rogi obramowania, jeśli istnieje.

Aby włączyć obramowanie, a tym samym uzyskać zaokrąglone rogi, potrzebujesz również borderatrybutu na elementach tdi th.

td, th {
   border:solid black 1px;
}

Jeśli masz kolor tła (lub grafikę), zobaczysz również zaokrąglone rogi, chociaż oczywiście musiałby być inny kolor tła niż otaczający element, aby zaokrąglone rogi były widoczne bez obramowania.

Warto zauważyć, że niektóre starsze przeglądarki nie lubią umieszczać border-radiustabel / komórek tabel. Może warto umieścić <div>wewnątrz każdej komórki i zamiast tego stylizować. Nie powinno to jednak wpływać na obecne wersje żadnych przeglądarek (z wyjątkiem IE, która w ogóle nie obsługuje zaokrąglonych rogów - patrz poniżej)

Wreszcie, nie chodzi o to, że IE nie obsługuje border-radiusw ogóle (IE9 beta tak, ale większość użytkowników IE będzie korzystać z IE8 lub mniej). Jeśli chcesz zhakować IE, aby obsługiwał border-radius, spójrz na http://css3pie.com/

[EDYTOWAĆ]

Okej, to mnie niepokoiło, więc zrobiłem kilka testów.

Oto przykład JSFiddle, z którym się bawiłem

Wygląda na to, że najważniejszą rzeczą, której brakowało, był border-collapse:separate;element tabeli. Uniemożliwia to komórkom łączenie ich granic ze sobą, co pozwala im odebrać promień obramowania.

Mam nadzieję, że to pomoże.

Spudley
źródło
Aby ograniczyć kod do minimum, pominąłem rzeczy z różnych przeglądarek. Jeśli podam granicę td i th, nie są one zaokrąglone. Otrzymuję proste krawędzie. Mógłby podać przykładowy kod CSS dla tabeli bez zastosowanego do niej CSS, co pokazałoby, o czym mówisz.
Vishal Shah
@Vishal Shah - zaktualizowałem odpowiedź po wykonaniu kilku testów. Mam nadzieję, że to pomoże.
Spudley,
Twój przykład wyświetla promień obramowania dla WSZYSTKICH komórek, gdzie tak, jak chcę, tylko dla komórek narożnych. Tego szukałem: jsfiddle.net/JWb4T/1
Vishal Shah
@Vishal Shah - Zrozumiałem, że problemem jest brak zaokrąglania w dowolnym miejscu na stole, a nie określanie, które bity tabeli powinny być zaokrąglane. Cieszę się, że udało ci się to załatwić w końcu (wygląda na to, że border-collapse:separate;wskazówka była przydatna na końcu)
Spudley,
+1 za zawalenie się obramowania: oddzielna wskazówka. To naprawdę mi pomogło.
DavidHyogo
12

Wybrana odpowiedź jest okropna. Zaimplementowałbym to, celując w komórki tabeli narożnej i stosując odpowiedni promień obramowania.

Aby uzyskać górne rogi, ustaw promień obramowania na pierwszym i ostatnim typie th elementów, a następnie zakończ, ustawiając promień obramowania ostatniego typu td i ostatniego typu tr, aby uzyskać dolne rogi.

th:first-of-type {
  border-top-left-radius: 10px;
}
th:last-of-type {
  border-top-right-radius: 10px;
}
tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}
tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
Luke Flournoy
źródło
To jest o wiele lepsze niż wszystkie inne odpowiedzi ... To jest zadziwiająco proste i eleganckie!
Eric Cote
Cieszę się, że mogłem pomóc!
Luke Flournoy
Działa to naprawdę dobrze, ale mam inny stół z thelementami na górze i po lewej stronie stołu i to nie działa w tym przypadku. Jak zaokrąglić rogi tego typu stołu?
nenur
7

Najlepsze rozwiązanie, jakie znalazłem dla zaokrąglonych rogów i innych zachowań CSS3 dla IE <9, można znaleźć tutaj: http://css3pie.com/

Pobierz wtyczkę, skopiuj do katalogu w strukturze rozwiązania. Następnie w swoim arkuszu stylów upewnij się, że masz tag behawioralny, aby pobierał wtyczkę.

Prosty przykład z mojego projektu, który daje mi zaokrąglone rogi, gradient kolorów i cień pola dla mojego stołu:

.table-canvas 
{
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    overflow:hidden;
    border-radius: 10px;
    -pie-background: linear-gradient(#ece9d8, #E5ECD8);   
    box-shadow: #666 0px 2px 3px;
    behavior: url(Include/PIE.htc);
    overflow: hidden;
}

Nie martw się, jeśli funkcja IntelliSense CSS w programie Visual Studio daje zielone podkreślenie dla nieznanych właściwości, nadal działa po uruchomieniu. Niektóre elementy nie są dobrze udokumentowane, ale przykłady są całkiem dobre, zwłaszcza na pierwszej stronie.

Patrick Rodriguez
źródło
6

Dzięki osobistemu doświadczeniu odkryłem, że nie jest możliwe zaokrąglanie rogów komórki tabeli HTML za pomocą czystego CSS. Możliwe jest zaokrąglenie skrajnej krawędzi stołu.

Będziesz musiał skorzystać z obrazów opisanych w tym samouczku lub podobnych :)

Kyle
źródło
1
+1, i to samo tutaj, ostatnio próbowałem to osiągnąć, ale bez powodzenia. Musiał umieścić wewnątrz <div>. ^^,
tomsseisums
4

To trochę szorstkie, ale oto coś, co złożyłem, co składa się w całości z CSS i HTML.

  • Zewnętrzne rogi zaokrąglone
  • Wiersz nagłówka
  • Wiele wierszy danych

W tym przykładzie użyto również :hoverpseudoklasy dla każdej komórki danych <td>. Elementy można łatwo aktualizować, aby spełniały Twoje potrzeby, a dymek można szybko wyłączyć.

(Jednak nie udało mi się jeszcze :hoverpoprawnie działać dla pełnych rzędów <tr>. Ostatni najechany wiersz nie jest wyświetlany z zaokrąglonymi rogami na dole. Jestem pewien, że jest coś prostego, co jest pomijane).

table.dltrc {
  width: 95%;
  border-collapse: separate;
  border-spacing: 0px;
  border: solid black 2px;
  border-radius: 8px;
}

tr.dlheader {
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  padding: 2px
}

td.dlheader {
  background: #d9d9d9;
  text-align: center;
  font-weight: bold;
  border-left: solid black 1px;
  border-radius: 0px;
  padding: 2px
}

tr.dlinfo,
td.dlinfo {
  text-align: center;
  border-left: solid black 1px;
  border-top: solid black 1px;
  padding: 2px
}

td.dlinfo:first-child,
td.dlheader:first-child {
  border-left: none;
}

td.dlheader:first-child {
  border-radius: 5px 0 0 0;
}

td.dlheader:last-child {
  border-radius: 0 5px 0 0;
}


/*===== hover effects =====*/


/*tr.hover01:hover,
tr.hover02:hover {
  background-color: #dde6ee;
}*/


/* === ROW HOVER === */


/*tr.hover02:hover:last-child {
  background-color: #dde6ee;
  border-radius: 0 0 6px 6px;
  }*/


/* === CELL HOVER === */

td.hover01:hover {
  background-color: #dde6ee;
}

td.hover02:hover {
  background-color: #dde6ee;
}

td.hover02:first-child {
  border-radius: 0 0 0 6px;
}

td.hover02:last-child {
  border-radius: 0 0 6px 0;
}
<body style="background:white">
  <br>
  <center>
    <table class="dltrc" style="background:none">
      <tbody>
        <tr class="dlheader">
          <td class="dlheader">Subject</td>
          <td class="dlheader">Title</td>
          <td class="dlheader">Format</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">One</td>
          <td class="dlinfo hover01">Two</td>
          <td class="dlinfo hover01">Three</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Four</td>
          <td class="dlinfo hover01">Five</td>
          <td class="dlinfo hover01">Six</td>
        </tr>
        <tr class="dlinfo hover01">
          <td class="dlinfo hover01">Seven</td>
          <td class="dlinfo hover01">Eight</td>
          <td class="dlinfo hover01">Nine</td>
        </tr>
        <tr class="dlinfo2 hover02">
          <td class="dlinfo hover02">Ten</td>
          <td class="dlinfo hover01">Eleven</td>
          <td class="dlinfo hover02">Twelve</td>
        </tr>
      </tbody>
    </table>
  </center>
</body>
Rozwiń fragment

K. Parker
źródło
To powinna być zatwierdzona odpowiedź. Dziękuję Ci!
wcielenie
1

Dodaj <div>opakowanie dookoła stołu i zastosuj następujący kod CSS

border-radius: x px;
overflow: hidden;
display: inline-block;

do tego opakowania.

Ubby
źródło
1

Aby dostosować genialną odpowiedź @luke Flournoy - a jeśli nie używasz thw swoim stole, oto wszystkie CSS, których potrzebujesz, aby stworzyć zaokrągloną tabelę:

.my_table{
border-collapse: separate;
border-spacing: 0;
border: 1px solid grey;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

.my_table tr:first-of-type {
  border-top-left-radius: 10px;
}

.my_table tr:first-of-type td:last-of-type {
  border-top-right-radius: 10px;
}

.my_table tr:last-of-type td:first-of-type {
  border-bottom-left-radius: 10px;
}

.my_table tr:last-of-type td:last-of-type {
  border-bottom-right-radius: 10px;
}
wolny świat
źródło
0

W przypadku obramowanej i przewijalnej tabeli użyj tego (zamień zmienne, $teksty początkowe)

Jeśli używasz thead, tfootlub thpo prostu wymień tr:first-childi tr-last-childi tdrazem z nimi.

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

HTML:

<div id=table-wrap>
  <table>
    <tr>
       <td>1</td>
       <td>2</td>
    </tr>
    <tr>
       <td>3</td>
       <td>4</td>
    </tr>
  </table>
</div>
brauliobo
źródło
0

Możesz to wypróbować, jeśli chcesz mieć zaokrąglone rogi po każdej stronie tabeli bez dotykania komórek: http://jsfiddle.net/7veZQ/3983/

<table>
    <tr class="first-line"><td>A</td><td>B</td></tr>
    <tr class="last-line"><td>C</td><td>D</td></tr>
</table>
Younes Hadry
źródło
0

Przykładowy kod HTML

<table class="round-corner" aria-describedby="caption">
    <caption id="caption">Table with rounded corners</caption>
    <thead>
        <tr>
            <th scope="col">Head1</th>
            <th scope="col">Head2</th>
            <th scope="col">Head3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
            <td scope="rowgroup">tbody1 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
            <td scope="rowgroup">tbody1 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
            <td scope="rowgroup">tbody2 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
            <td scope="rowgroup">tbody2 row2</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
            <td scope="rowgroup">tbody3 row1</td>
        </tr>
        <tr>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
            <td scope="rowgroup">tbody3 row2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
            <td scope="col">Foot</td>
        </tr>
    </tfoot>
</table>

SCSS, łatwo przekonwertowany do CSS, użyj sassmeister.com

// General CSS
table,
th,
td {
    border: 1px solid #000;
    padding: 8px 12px;
}

.round-corner {
    border-collapse: collapse;
    border-style: hidden;
    box-shadow: 0 0 0 1px #000; // fake "border"
    border-radius: 4px;

    // Maybe there's no THEAD after the caption?
    caption + tbody {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:first-child {
        tr:first-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tbody:last-child {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    thead {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-top-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-top-right-radius: 4px;
                border-right: none;
            }
        }
    }

    tfoot {
        tr:last-child {
            td:first-child,
            th:first-child {
                border-bottom-left-radius: 4px;
            }

            td:last-child,
            th:last-child {
                border-bottom-right-radius: 4px;
                border-right: none;
            }
        }
    }

    // Reset tables inside table
    table tr th,
    table tr td {
        border-radius: 0;
    }
}

http://jsfiddle.net/MuTLY/xqrgo466/

Leandro Barbosa
źródło
0

Oto coś, czego używałem i działało dla mnie w różnych przeglądarkach, więc mam nadzieję, że pomoże to komuś w przyszłości:

#contentblock th:first-child {
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
    border-radius: 6px 0 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 6px 0 0 0;
}

#contentblock th:last-child {
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
    border-radius: 0 6px 0 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 6px 0 0;
}
#contentblock tr:last-child td:last-child {
     border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 6px 0;
 }

#contentblock tr:last-child td:first-child {
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
    border-radius: 0 0 0 6px;
    behavior: url(/images/border-radius.htc);
    border-radius: 0 0 0 6px;
}

Oczywiście #contentblockczęść można zastąpić / edytować w razie potrzeby, a border-radius.htcplik można znaleźć, wyszukując w Google lub ulubionej przeglądarce internetowej.

Ansipants
źródło
0

To jest css3 , że obsługuje go tylko najnowsza przeglądarka inna niż IE <9.

Sprawdź tutaj , wyprowadza właściwość round dla wszystkich dostępnych przeglądarek

BiAiB
źródło
4
css3please nie robi nic dla border-radius w IE. Jeśli chcesz zhakować
Spudley
Mówię o właściwościach zaokrąglonych specjalnie dla tabeli, a nie o żadnym innym elemencie.
Vishal Shah
0

Dodaj między <head>tagami:

<style>
  td {background: #ffddaa; width: 20%;}
</style>

iw ciele:

<div style="background: black; border-radius: 12px;">
  <table width="100%" style="cell-spacing: 1px;">
    <tr>
      <td style="border-top-left-radius: 10px;">
        Noordwest
      </td>
      <td>&nbsp;</td>
      <td>Noord</td>
      <td>&nbsp;</td>
      <td style="border-top-right-radius: 10px;">
        Noordoost
      </td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>West</td>
      <td>&nbsp;</td>
      <td>Centrum</td>
      <td>&nbsp;</td>
      <td>Oost</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td style="border-bottom-left-radius: 10px;">
        Zuidwest
      </td>
      <td>&nbsp;</td>
      <td>Zuid</td>
      <td>&nbsp;</td>
      <td style="border-bottom-right-radius: 10px;">
        Zuidoost
      </td>
    </tr>
  </table>
</div>

Kolor, zawartość i formatowanie komórek są oczywiście na przykład;
chodzi o rozmieszczanie komórek wypełnionych kolorem w elemencie div. W ten sposób czarne obramowanie komórek / obramowanie tabeli są w rzeczywistości kolorem tła div.
Zauważ, że musisz ustawić div-border-radius o około 2 wartości większe niż promienie obramowania rogów oddzielnych komórek, aby uzyskać gładki efekt zaokrąglonego narożnika.

Paul Schuddebeurs
źródło
0

Lekcja z obramowaniem tabel ...

UWAGA: Poniższy kod HTML / CSS powinien być wyświetlany tylko w przeglądarce IE. Kod nie będzie poprawnie renderowany w przeglądarce Chrome!

Musimy pamiętać, że:

  1. Tabela ma granicę: jej zewnętrzną granicę (która może mieć również border-radius).

  2. Same komórki TAKŻE mają obramowania (które również mogą mieć border-radius).

  3. Obramowania tabeli i komórek mogą ze sobą kolidować:

    Obramowanie komórki może przebić granicę tabeli (tj. Granicę tabeli).

    Aby zobaczyć ten efekt, zmień reguły stylu CSS w poniższym kodzie w następujący sposób:
    i. table {border-collapse: oddzielne;}
    ii. Usuń reguły stylu, które otaczają komórki narożne tabeli.
    iii. Następnie baw się z odstępami między obramowaniem, aby zobaczyć zakłócenia.

  4. Jednak obramowanie tabeli i obramowanie komórek można ZWINIĘĆ (używając: border-collapse: collapse;).

  5. Gdy są zwinięte, obramowania komórek i tabeli zakłócają się w inny sposób:

    ja. Jeśli obramowanie tabeli jest zaokrąglone, ale obramowania komórek pozostają kwadratowe, wówczas kształt komórki ma pierwszeństwo, a tabela traci zakrzywione rogi.

    ii. I odwrotnie, jeśli komórki narożne są zakrzywione, ale granica tabeli jest kwadratowa, zobaczysz brzydki kwadratowy róg graniczący z krzywizną komórek narożnych.

  6. Biorąc pod uwagę, że atrybut tej komórki ma pierwszeństwo, sposobem na zaokrąglenie czterech rogów tabeli jest:

    ja. Zwijanie obramowań w tabeli (używając: border-collapse: collapse;).

    ii. Ustawianie żądanej krzywizny w komórkach narożnych tabeli.
    iii. Nie ma znaczenia, czy narożniki stołu są zaokrąglone (tj .: jego promień-border może wynosić zero). 

			.zui-table-rounded {
				border: 2px solid blue;
				/*border-radius: 20px;*/
				
				border-collapse: collapse;
				border-spacing: 0px;
			}
						
			.zui-table-rounded thead th:first-child {
				border-radius: 30px 0 0 0;
			}
			
			.zui-table-rounded thead th:last-child {
				border-radius: 0 10px 0 0;
			}
			
			.zui-table-rounded tbody tr:last-child td:first-child {
				border-radius: 0 0 0 10px;
			}
			
			.zui-table-rounded tbody tr:last-child td:last-child {
				border-radius: 0 0 10px 0;
			}
			
			
			.zui-table-rounded thead th {
				background-color: #CFAD70;
			}
			
			.zui-table-rounded tbody td {
				border-top: solid 1px #957030;
				background-color: #EED592;
			}
			<table class="zui-table-rounded">
			<thead>
				<tr>
					<th>Name</th>
					<th>Position</th>
					<th>Height</th>
					<th>Born</th>
					<th>Salary</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>DeMarcus Cousins</td>
					<td>C</td>
					<td>6'11"</td>
					<td>08-13-1990</td>
					<td>$4,917,000</td>
				</tr>
				<tr>
					<td>Isaiah Thomas</td>
					<td>PG</td>
					<td>5'9"</td>
					<td>02-07-1989</td>
					<td>$473,604</td>
				</tr>
				<tr>
					<td>Ben McLemore</td>
					<td>SG</td>
					<td>6'5"</td>
					<td>02-11-1993</td>
					<td>$2,895,960</td>
				</tr>
				<tr>
					<td>Marcus Thornton</td>
					<td>SG</td>
					<td>6'4"</td>
					<td>05-05-1987</td>
					<td>$7,000,000</td>
				</tr>
				<tr>
					<td>Jason Thompson</td>
					<td>PF</td>
					<td>6'11"</td>
					<td>06-21-1986</td>
					<td>$3,001,000</td>
				</tr>
			</tbody>
		</table>
Rozwiń fragment

IqbalHamid
źródło
-1

CSS:

table {
  border: 1px solid black;
  border-radius: 10px;
  border-collapse: collapse;
  overflow: hidden;
}

td {
  padding: 0.5em 1em;
  border: 1px solid black;
}
Goran Vasic
źródło
Opisz
@SrivatsShankar Napisałem to dawno temu, więc sądząc po tym -1, przypuszczam, że już nie działa. Chodziło mi o to, aby dodać „border-radius” do <table>, a następnie „overflow: hidden” ukryłby zewnętrzne granice przed <td>. Domyślam się, że możesz spróbować dodać „border-radius”, „border” i „overflow: hidden” do <div>, które jest opakowaniem dla <table>, a następnie dodać obramowania wewnątrz każdego <td> (ja zrobiłby pierwszy i ostatni element każdego wiersza / kolumny bez zewnętrznej krawędzi, ponieważ <div> będzie miał zaokrąglone obramowanie, tak jak na zdjęciu)
Goran Vasic
Słusznie. To ma sens. Nie daje dokładnego żądanego wyniku, ale rozumiem, o co chodzi. Jeśli mógłbyś edytować swoją odpowiedź, mogę zmodyfikować swój wynik. :-)
Srivats Shankar