CSS3'ün kenar yarıçapı özelliği ve kenar çökmesi: çöküş karışmaz. Köşeleri yuvarlatılmış daraltılmış bir tablo oluşturmak için kenarlık yarıçapını nasıl kullanabilirim?

Düzenleme - Orijinal Başlık: ulaşmak için alternatif bir yolu var mı border-collapse:collapseiçinde CSS(bir daraltılmış, yuvarlak köşe masa olması için)?

Tablonun kenarlıklarını daraltmak kök problemini çözmediği için, tartışmayı daha iyi yansıtmak için başlığı güncelledim.

CSS3 border-radiusÖzelliği kullanarak köşeleri yuvarlatılmış bir tablo yapmaya çalışıyorum . Kullandığım tablo stilleri şuna benzer:

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

Sorun burada. Ayrıca border-collapse:collapseözelliği ayarlamak istiyorum ve bu ayarlandığında border-radiusartık çalışmaz. border-collapse:collapseAslında kullanmadan aynı etkiyi elde etmenin CSS tabanlı bir yolu var mı?

Düzenlemeler:

Sorunu burada göstermek için basit bir sayfa yaptım (yalnızca Firefox / Safari).

Sorunun büyük bir kısmı, tablonun köşeleri yuvarlatılmış olarak ayarlanmasının köşe tdelemanlarının köşelerini etkilememesidir . Tablonun hepsi tek bir renk olsaydı, üst ve alt tdköşeleri sırasıyla ilk ve son sıra için yuvarlayabildiğim için bu bir sorun olmazdı . Ancak, tablonun başlıkları farklılaştırmak ve şeritlemek için farklı arka plan renkleri kullanıyorum, böylece iç tdelemanlar da yuvarlatılmış köşelerini gösterecekti.

Önerilen çözümlerin özeti:

Masanın yuvarlak köşeli başka bir elemanla çevrelenmesi işe yaramaz çünkü masanın kare köşeleri "kanar."

Kenarlık genişliğini 0 olarak belirtmek tabloyu daraltmaz.

tdHücre aralığı sıfıra ayarlandıktan sonra alt köşeler hala kare.

Bunun yerine JavaScript kullanmak sorunu önleyerek çalışır.

Olası çözümler:

Tablolar PHP oluşturulur, bu yüzden sadece dış th / tds her biri için farklı bir sınıf uygulamak ve ayrı ayrı her köşe stil olabilir. Bunu yapmak istemiyorum, çünkü çok zarif ve birden fazla tabloya uygulamak biraz acı değil, bu yüzden lütfen önerilerinizi devam ettirin.

Olası çözüm 2, köşeleri şekillendirmek için JavaScript (özellikle jQuery) kullanmaktır. Bu çözüm de işe yarıyor, ama hala aradığım şey tam olarak değil (seçici olduğumu biliyorum). İki rezervasyonum var:

1. Bu çok hafif bir site ve JavaScript'i en düşük düzeyde tutmak istiyorum
2. sınır yarıçapının benim için sahip olduğu cazibenin bir kısmı zarif bir bozulma ve aşamalı bir iyileştirmedir. Tüm yuvarlak köşeler için sınır yarıçapı kullanarak, CSS3 özellikli tarayıcılarda sürekli olarak yuvarlak bir siteye ve diğerlerinde sürekli olarak kare bir siteye sahip olmayı umuyorum (size bakıyorum, IE).

Bunu bugün CSS3 ile yapmaya çalışmanın gereksiz görünebileceğini biliyorum, ama nedenlerim var. Ayrıca, bu sorunun zayıf CSS3 desteğinin değil, w3c spesifikasyonunun bir sonucu olduğunu belirtmek isterim, bu nedenle CSS3 daha yaygın bir desteğe sahip olduğunda herhangi bir çözüm yine de alakalı ve yararlı olacaktır.

Bunu anladım. Sadece bazı özel seçiciler kullanmanız gerekiyor.

Tablonun köşelerini yuvarlamadaki sorun, td elemanlarının da yuvarlanmamış olmasıydı. Bunu böyle bir şey yaparak çözebilirsiniz:

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

Şimdi her şey düzgün yuvarlanıyor, sadece border-collapse: collapseher şeyi kırma sorunu var .

Çözüm, varsayılanı tabloya eklemekborder-spacing: 0 ve varsayılan değer border-collapse: separateolarak bırakmaktır .

Aşağıdaki yöntem , "gerçek" kenarlık yerine box-shadowyayılma özelliğiyle ( Chrome'da test edilmiştir) çalışır 1px.

table {
    border-collapse: collapse;
    border-radius: 30px;
    border-style: hidden; /* hide standard table (collapsed) border */
    box-shadow: 0 0 0 1px #666; /* this draws the table border  */ 
}

td {
    border: 1px solid #ccc;
}

cellspacing=01px kenarlıklara izin veren (yalnızca çözümle yapamayacağınız) bir CSS tabanlı çözüm ( HTML'de ayarlamaya gerek yok ) istiyorsanız border-spacing: 0, aşağıdakileri yapmayı tercih ederim:

• Tablo hücreleriniz için a border-rightve ayarlayın border-bottom( tdve th)
• İlk satırdaki hücreleri birborder-top
• İlk sütundaki hücreleri birborder-left
• first-childVe last-childseçicileri kullanarak, dört köşedeki tablo hücreleri için uygun köşeleri yuvarlayın.

Burada bir demo izleyin.

Aşağıdaki HTML verildiğinde:

Aşağıdaki örneği inceleyin:

   

 .custom-table{margin:30px;}
    table {
        border-collapse: separate;
        border-spacing: 0;
        min-width: 350px;
        
    }
    table tr th,
    table tr td {
        border-right: 1px solid #bbb;
        border-bottom: 1px solid #bbb;
        padding: 5px;
    }
    table tr th:first-child, table tr th:last-child{
    border-top:solid 1px      #bbb;}
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
        
    }
    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #bbb;
    }
    table tr th {
        background: #eee;
        text-align: left;
    }
    
    table.Info tr th,
    table.Info tr:first-child td
    {
        border-top: 1px solid #bbb;
    }
    
    /* top-left border-radius */
    table tr:first-child th:first-child,
    table.Info tr:first-child td:first-child {
        border-top-left-radius: 6px;
    }
    
    /* top-right border-radius */
    table tr:first-child th:last-child,
    table.Info tr:first-child td:last-child {
        border-top-right-radius: 6px;
    }
    
    /* bottom-left border-radius */
    table tr:last-child td:first-child {
        border-bottom-left-radius: 6px;
    }
    
    /* bottom-right border-radius */
    table tr:last-child td:last-child {
        border-bottom-right-radius: 6px;
    }
         

<div class="custom-table">
    <table>
        <tr>
            <th>item1</th>
            <th>item2</th>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
        <tr>
            <td>item1</td>
            <td>item2</td>
        </tr>
    </table>
</div>

Kullandığınız denediniz table{border-spacing: 0}yerine table{border-collapse: collapse}???

Muhtemelen masanın etrafına başka bir öğe koymanız ve yuvarlatılmış bir kenarlıkla şekillendirmeniz gerekecektir.

Çalışılan taslak belirtir border-radiusdeğeri zaman tablo elemanları için geçerli değildir border-collapseolduğunu collapse.

Ian'ın dediği gibi, çözüm tabloyu bir div içine yerleştirmek ve şöyle ayarlamaktır:

.table_wrapper {
  border-radius: 5px;
  overflow: hidden;
}

İle overflow:hidden, kare köşeler div'den kanamayacak.

Bildiğim kadarıyla, bunu yapmanın tek yolu tüm hücreleri bu şekilde değiştirmek olacaktır:

table td {
  border-right-width: 0px;
  border-bottom-width: 0px;
}

Ve sonra sınırı alt ve sağ arkaya almak için

table tr td:last-child {
  border-right-width: 1px;
}
table tr:last-child td {
  border-bottom-width: 1px;
}

:last-childie6'da geçerli değil, ancak kullanıyorsanız border-radiusumursamadığınızı varsayıyorum.

DÜZENLE:

Örnek sayfanıza baktıktan sonra, hücre aralığı ve dolgu ile bu sorunu çözebileceğiniz anlaşılıyor.

Gördüğünüz kalın gri kenarlıklar aslında tablonun arka planıdır (kenarlık rengini kırmızıya değiştirirseniz bunu açıkça görebilirsiniz). Hücre aralığını sıfıra (veya eşdeğer olarak:) ayarlarsanız, td, th { margin:0; }gri "kenarlıklar" kaybolur.

DÜZENLEME 2:

Bunu tek bir tablo ile yapmanın bir yolunu bulamıyorum. Başlık satırınızı iç içe geçmiş bir tabloya değiştirirseniz, istediğiniz efekti elde edebilirsiniz, ancak dinamik değil, daha fazla iş olur.

Pseudo elemanlarını kullanan bir çözüm güvenilir :beforeve :afterilgili thead th:first-childvethead th:last-child

Tabloyu bir <div class="radius borderCCC">

table thead th:first-child:before{ 
    content:" ";
    position:absolute;
    top:-1px;
    left:-1px;
    width:15px;
    height:15px;
    border-left:1px solid #ccc;
    border-top:1px solid #ccc; 
    -webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{ 
    content:" "; 
    position:absolute; 
    top:-1px;
    right:-1px; 
    width:15px;
    height:15px;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    -webkit-border-radius:0px 5px 0px 0px;
}

bkz. jsFiddle

Chrome'da benim için çalışıyor (13.0.782.215) Bunun diğer tarayıcılarda size uygun olup olmadığını bildirin.

Aslında tableiçine bir divsarmalayıcı olarak ekleyebilirsiniz . ve bu CSSkodları paketleyiciye atayın :

.table-wrapper {
  border: 1px solid #f00;
  border-radius: 5px;
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

Verilen cevaplar sadece masanın etrafında sınır olmadığında işe yarıyor ki bu çok sınırlayıcı!

Bunu yapmak için SASS'de, dış ve iç sınırları tam olarak destekleyen , sınır çöküşüyle ​​aynı stile ulaşan bir makro var : Aslında belirtmeden daraltın.

FF / IE8 / Safari / Chrome'da test edilmiştir.

Tüm tarayıcılarda saf CSS'de güzel yuvarlak kenarlıklar verir, ancak IE8 sınır yarıçapını desteklemediğinden IE8 (incelikle bozulur) :(

Bazı eski tarayıcılar için satıcı öneklerinin çalışması gerekebilirborder-radius , bu nedenle bu önekleri kodunuza gerektiği gibi eklemekten çekinmeyin.

Bu cevap en kısa değil - ama işe yarıyor.

.roundedTable {
  border-radius: 20px / 20px;
  border: 1px solid #333333;
  border-spacing: 0px;
}
.roundedTable th {
  padding: 4px;
  background: #ffcc11;
  border-left: 1px solid #333333;
}
.roundedTable th:first-child {
  border-left: none;
  border-top-left-radius: 20px;
}
.roundedTable th:last-child {
  border-top-right-radius: 20px;
}
.roundedTable tr td {
  border: 1px solid #333333;
  border-right: none;
  border-bottom: none;
  padding: 4px;
}
.roundedTable tr td:first-child {
  border-left: none;
}

Bu stili uygulamak için

<table>

aşağıdakilere etiketleyin:

<table class="roundedTable">

ve HTML'nize yukarıdaki CSS stillerini eklediğinizden emin olun.

Bu yardımcı olur umarım.

Kenarlıklı ve kaydırılabilir bir tablo için bunu kullanın (değişkenleri değiştirin, $metinleri başlatın)

Eğer kullanırsanız thead, tfootya thsadece değiştirin tr:first-childve tr-last-childve tdonlarla.

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

Ben de aynı problemi yaşadım. border-collapsetamamen kaldırın ve cellspacing="0" cellpadding="0" html belgesinde : kullanın . misal:

<table class="top_container" align="center" cellspacing="0" cellpadding="0">

Ben sadece bunun için mükemmel gibi görünüyor deli bir CSS seti yazdım:

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
table td,
table th {
  border-right: 1px solid #CCC;
  border-top: 1px solid #CCC;
  padding: 3px 5px;
  vertical-align: top;
}
table td:first-child,
table th:first-child {
  border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
  border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
  border-top: 0;
}
table thead td,
table th {
  background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
  border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
  border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
  border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
  border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
  border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
  border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
  border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
  border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

Kenar çöküşüyle ​​çözüm: tablo ve ekran için ayrı: tbody ve thead için satır içi tablo.

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  background: transparent;   
}
table thead {
  display: inline-table;
  width: 100%;
  background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
  -webkit-border-top-left-radius: 7px;
  -moz-border-radius-topleft: 7px;
  -webkit-border-top-right-radius: 7px;
  -moz-border-radius-topright: 7px;
    border-radius: 7px 7px 0px 0px;
  padding: 1px;
  padding-bottom: 0;
}

table tbody {
  border: 1px solid #ddd;
  display: inline-table;
  width: 100%;
  border-top: none;        
}

HTML ve CSS ile yeniyim ve bunun için burada bir çözüm arıyordum.

table,th,td {
   border: 1px solid black;
   border-spacing: 0
}
/* add border-radius to table only*/
table {
   border-radius: 25px    
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
   border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
   border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
   border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
   border-radius: 0 0 25px 0
}

Deniyorum, tahmin et ne işe yarıyor :)

Aynı soruna girdikten sonra bu cevabı buldum, ancak oldukça basit olduğunu gördüm: sadece tablo taşmasını verin: gizli

Sarma elemanına gerek yoktur. Verilmiş, bunun soru ilk olarak sorulduğunda 7 yıl önce işe yarayıp yaramayacağını bilmiyorum, ama şimdi çalışıyor.

Köşeleri yuvarlatılmış ve kenarlıklı hücreler içeren tablo. @Ramon Tayag çözümünü kullanma .

Anahtar, işaret ettiği gibi kullanmaktır border-spacing: 0.

SCSS kullanarak çözüm .

$line: 1px solid #979797;
$radius: 5px;

table {
  border: $line;
  border-radius: $radius;
  border-spacing: 0;
  th,
  tr:not(:last-child) td {
    border-bottom: $line;
  }
  th:not(:last-child),
  td:not(:last-child) {
    border-right: $line;
  }
}

Ben "ekran" ile deney başladı ve bunu buldum: border-radius, border, margin, padding, bir de tablegörüntülenir:

display: inline-table;

Örneğin

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Ancak widthher sütundan bir

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

İşte http://medialoot.com/preview/css-ui-kit/demo.html adresinden köşeleri yuvarlatılmış bir tablonun nasıl uygulanacağına dair son bir örnek . Yukarıda Joel Potter tarafından önerilen özel seçicilere dayanıyor. Gördüğünüz gibi, IE'yi biraz mutlu etmek için biraz sihir içerir. Satırların rengini değiştirmek için bazı ekstra stiller içerir:

table-wrapper {
  width: 460px;
  background: #E0E0E0;
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
  background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
  background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
  padding: 8px;
  -webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
  -webkit-border-radius: 10px;
  /*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
  -o-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.table-wrapper table {
  width: 460px;
}
.table-header {
  height: 35px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  line-height: 34px;
  text-decoration: none;
  font-weight: bold;
}
.table-row td {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  font-weight: normal;
  color: #858585;
  padding: 10px;
  border-left: 1px solid #ccc;
  -khtml-box-shadow: 0px 1px 0px #B2B3B5;
  -webkit-box-shadow: 0px 1px 0px #B2B3B5;
  -moz-box-shadow: 0px 1px 0px #ddd;
  -o-box-shadow: 0px 1px 0px #B2B3B5;
  box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
  border-left: 1px solid #ccc;
}
tr th:first-child {
 -khtml-border-top-left-radius: 8px;
  -webkit-border-top-left-radius: 8px;
  -o-border-top-left-radius: 8px;
  /*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-left-radius: 8px;
  border: none;
}
tr td:first-child {
  border: none;
}
tr th:last-child {
  -khtml-border-top-right-radius: 8px;
  -webkit-border-top-right-radius: 8px;
  -o-border-top-right-radius: 8px;
  /*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
  border-top-right-radius: 8px;
}
tr {
  background: #fff;
}
tr:nth-child(odd) {
  background: #F3F3F3;
}
tr:nth-child(even) {
  background: #fff;
}
tr:last-child td:first-child {
  -khtml-border-bottom-left-radius: 8px;
  -webkit-border-bottom-left-radius: 8px;
  -o-border-bottom-left-radius: 8px;
  /*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
  -khtml-border-bottom-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -o-border-bottom-right-radius: 8px;
  /*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
  border-bottom-right-radius: 8px;
}

İşte bir yol:

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

Veya

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Sass kullanarak hep böyle yaparım

table {
  border-radius: 0.25rem;
  thead tr:first-child th {
    &:first-child {
      border-top-left-radius: 0.25rem;
    }
    &:last-child {
      border-top-right-radius: 0.25rem;
    }
  }
  tbody tr:last-child td {
    &:first-child {
      border-bottom-left-radius: 0.25rem;
    }
    &:last-child {
      border-bottom-right-radius: 0.25rem;
    }
  }
}

Şimdiye kadarki en iyi çözüm kendi çözümünüzden geliyor ve şöyle devam ediyor:

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

table tr:last-child td:first-child, tr:last-child, table {
    border-bottom-left-radius: 25px;
}

table tr:last-child td:last-child, tr:last-child, table {
    border-bottom-right-radius: 25px;
}


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Sınır yarıçapı artık resmi olarak destekleniyor. Dolayısıyla, yukarıdaki örneklerin hepsinde "-moz-" önekini bırakabilirsiniz.

Başka bir hile, üst ve alt satırlar için kenarlığınızla aynı rengi kullanmaktır. 3 rengin hepsi aynı olduğunda, fiziksel olarak olmasa bile mükemmel bir şekilde yuvarlak bir masaya benziyor.