Tablo satırına kenarlık yarıçapı nasıl eklenir

Tr'yi istediğimiz gibi biçimlendirmeyi bilen var mı?

Tablo üzerinde border-collapse kullandım, bundan sonra tr'ler 1px solid border görüntüleyebilir onlara veriyorum.

Ancak denediğimde -moz-border-radiusişe yaramıyor. Basit bir marj bile çalışmıyor.

Td'ye yalnızca border-radius uygulayabilirsiniz, tr veya table değil. Bu stilleri kullanarak yuvarlak köşe masaları için bunu aştım:

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

Tüm satıcı öneklerini sağladığınızdan emin olun. İşte bunun işleyişine bir örnek .

Satırlar Arasındaki Gerçek Aralık

Bu eski bir iş parçacığı, ancak diğer yanıtlarda OP'den gelen yorumları okurken asıl amacın görünüşe göre border-radiussatırlarda ve satırlar arasındaki boşluklarda olması olduğunu fark ettim . Mevcut çözümlerin tam olarak bunu yaptığı görülmüyor. theazureshadow'un cevabı doğru yönde ilerliyor, ancak biraz daha fazlasına ihtiyacı var gibi görünüyor.

Bununla ilgilenenler için, burada satırları ayıran ve her satıra yarıçapı uygulayan bir keman var. (NOT: Firefox'ta şu anda background-colorsınır yarıçaplarında görüntüleme / kırpmada bir hata var .)

Kod aşağıdaki gibidir (ve theazureshadow'un da belirttiği gibi, daha önceki tarayıcı desteği için border-radiusihtiyaç için çeşitli satıcı önekleri eklenmiştir).

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

Bonus bilgisi: 's border-radiusile border-collapse: collapse;kenarlık ayarlanmış masalar üzerinde etkisi yoktur td. Ve eğer önemli değil border-radiusayarlanır table, trya td-o göz ardı ediyor.

http://jsfiddle.net/Exe3g/

Tr öğesi, border-radius'u dikkate alır. Saf html ve css kullanabilir, javascript yok.

JSFiddle bağlantısı: 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>

Bence sınırlarınızı yıkmak bu durumda yapılacak yanlış bir şey. Bunları daraltmak, temelde iki komşu hücre arasındaki sınırın paylaşıldığı anlamına gelir. Bu, bir yarıçap verildiğinde hangi yöne doğru eğilmesi gerektiğinin belirsiz olduğu anlamına gelir.

Bunun yerine, ilk tank avcısının iki sol köşesine ve sonuncunun iki sağ köşesine bir sınır yarıçapı verebilirsiniz. first-childVe last-childseçicileri theazureshadow tarafından önerildiği gibi kullanabilirsiniz , ancak bunlar IE'nin eski sürümleri tarafından yetersiz bir şekilde destekleniyor olabilir. Bu amaca hizmet etmek .first-columnve gibi sınıfları tanımlamak daha kolay olabilir .last-column.

Opera'ya göre CSS3 standardı border-radius, TD'lerde kullanımını tanımlamaz . Deneyimim, Firefox ve Chrome'un desteklediği, ancak Opera'nın desteklemediği (IE'yi bilmiyorum). Çözüm, td içeriğini bir div içine sarmak ve sonra border-radiusbunu div'e uygulamaktır.

Burada herhangi bir kredi almaya çalışmıyorum, cevabı için tüm kredi @theazureshadow'a gidiyor, ancak kişisel olarak onu ilk satırın hücreleri <th>yerine bazılarının bulunduğu bir tabloya uyarlamak zorunda kaldım <td>.

Bazılarınızın @ theazureshadow çözümünü kullanmak istemesi durumunda değiştirilmiş sürümü burada yayınlıyorum, ancak benim gibi <th>, ilkinde biraz var <tr>. "ReportTable" sınıfı yalnızca tablonun kendisine uygulanmalıdır .:

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

Dolguları, yarıçapları vb. İhtiyaçlarınıza uyacak şekilde ayarlamaktan çekinmeyin. Umarım bu insanlara yardımcı olur!

Tablolara, trs ve tds'ye border-radius eklemenin Chrome, FF ve IE'nin en son sürümlerinde% 100 çalışmadığını fark ettim. Bunun yerine yaptığım şey, masayı bir div ile sarıyorum ve üzerine border-radius koyuyorum.

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

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

Masanız değilse width: 100%, ambalajınızı yapabilirsiniz float: left, sadece temizlemeyi unutmayın.

Border-collapse: seperate; ve sınır aralığı: 0; ancak tds için yalnızca border-right ve border-bottom'ı kullanın; th için border-top ve yalnızca tr td: nth-child (1) için border-left uygulanır.

Daha sonra köşe td'lerine kenarlık yarıçapı uygulayabilirsiniz (onları bulmak için nth-child'ı kullanarak)

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

Veya tablo daralmışsa kutu gölgesini kullanın

Tüm cevaplar çok uzun. Sınırı bir özellik olarak kabul eden bir tablo öğesine kenarlık yarıçapı eklemenin en kolay yolu, overflow: hidden ile kenarlık yarıçapı yapmaktır.

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