Bir tablodaki belirli satırların etrafında kenarlık var mı?

120

Bir tablodaki belirli satırların etrafına kenarlık koyabilen bazı HTML / CSS tasarlamaya çalışıyorum. Evet, mizanpaj için gerçekten tablo kullanmam gerektiğini biliyorum, ancak henüz tamamen değiştirmek için yeterli CSS bilmiyorum.

Her neyse, bazıları satır aralığı ve colspan ile birleştirilmiş birden çok satır ve sütun içeren bir tablom var ve tablonun bazı bölümlerinin etrafına basit bir kenarlık koymak istiyorum. Şu anda tablonun üst, alt, sol ve sağındaki <td>hücrelere iliştirdiğim 4 ayrı CSS sınıfı (üst, alt, sol, sağ) kullanıyorum .

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}

<html>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr>
      <td class="top left">one</td>
      <td class="top right">two</td>
    </tr>
    <tr>
      <td class="bottom left">three</td>
      <td class="bottom right">four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr>
      <td class="top bottom left right" colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</html>

Snippet'i genişlet

İstediğimi yapmanın daha kolay bir yolu var mı? A'ya yukarı ve aşağı uygulamayı denedim <tr>ama işe yaramadı. (ps CSS'de yeniyim, bu yüzden muhtemelen kaçırdığım gerçekten temel bir çözüm var.)

not: Birden çok kenarlıklı bölüme ihtiyacım var. Temel fikir, her biri birden çok satır içeren birden çok kenarlı kümeye sahip olmaktır.

— Kyle Cronin
kaynak

9

Konu dışı ama sadece şunu söylemek istedim, tablolar mükemmel şekilde uygundur ve tablo verileri görüntülerken önerilir ...

— md1337

114

Nasıl olur tr {outline: thin solid black;}? Benim için tr veya tbody öğelerinde çalışıyor ve IE 8+ dahil, ancak daha önce değil, çoğu tarayıcıyla uyumlu görünüyor .

— enigment
kaynak

Bir tablodaki birden çok satırın etrafına tek bir kenarlık koymayı, esasen görsel olarak onu birden çok bölüme ayırmayı, ancak aynı tablo içinde farklı bölümlerden gelen öğelerin hizalanmasını istedim.

— Kyle Cronin

3

Anlaşıldı, buna da ihtiyacım vardı. Çevresinde bir kenarlık olmasını istediğiniz satır kümesini kendi tbodyleri içine alın ve yukarıdaki css, bu kümelerin etrafında bir sınır oluşturacaktır - yani, üst satırda bir üst sınır, alt satırda bir alt sınır ve sol ve tbody'deki tüm satırlarda sağ kenarlıklar. Sınırlar aslında bu satırların "üzerinde" değil, gövdenin kendisinin ana hatlarında bulunuyorlar, sadece etkiyi tanımlamaya çalışıyorlar.

— Haz13

Oh, anlıyorum, birden fazla tbody - bu işe yarıyor ve hiç düşünmediğim bir şey. Olumlu oy verildi :)

— Kyle Cronin

Oldukça dinamik verileriniz yoksa, tbodys'i tanımlamak yerine nth-child () css özelliğini kullanmanızı öneririm. Nth-child (), nth-last-child () ve () değil, istediğiniz herhangi bir satırı / hücreyi seçebilirsiniz (tablodaki şeylerin göreli dizinlerini bildiğiniz sürece). Örneğin, tr: not (: nth-child (-n + 2)): not (: nth-last-child (1))

— BT

1

Ana hattın bir öğenin belirli taraflarını sınırlama olasılığı olmadığını unutmayın . Örneğin "anahat üst" yoktur. Bu sınırlı bir çözüm

— BT

53

Cevap veren herkese teşekkür ederiz! Burada sunulan tüm çözümleri denedim ve diğer olası çözümler için internette daha fazla araştırma yaptım ve sanırım umut verici bir çözüm buldum:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}

<html>

<head>
</head>

<body>

  <table cellspacing="0">
    <tr>
      <td>no border</td>
      <td>no border here either</td>
    </tr>
    <tr class="top row">
      <td>one</td>
      <td>two</td>
    </tr>
    <tr class="bottom row">
      <td>three</td>
      <td>four</td>
    </tr>
    <tr>
      <td colspan="2">once again no borders</td>
    </tr>
    <tr class="top bottom row">
      <td colspan="2">hello</td>
    </tr>
    <tr>
      <td colspan="2">world</td>
    </tr>
  </table>

</body>

</html>

Snippet'i genişlet

Çıktı:

görüntü açıklamasını buraya girin

Bunun yerine eklemek zorunda top, bottom, leftve righther sınıflar <td>, yapmam gereken tüm eklenti olduğunutop row üstüne <tr>, bottom rowaltına <tr>ve rowher üzere <tr>aradaki. Bu çözümde bir sorun mu var? Bilmem gereken çapraz platform sorunları var mı?

— Kyle Cronin
kaynak

Tarayıcı görüntüleri üzerinden bir test yaptım ve görünüşe göre IE (tüm sürümler) birinci-çocuk ve son-çocuk özelliklerini sevmiyor. : - /

— Kyle Cronin

1

(!) IE 7 ve 8 destek birinci çocuğa, ama hiçbiri destek son çocuk gibi görünüyor msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx

— mechanical_meat

cellspacingNitelik HTML5'teki kaldırılmıştır. Görünüşe göre CSS table { border-collapse: collapse; border-spacing: 0; }artık gitmenin yolu.

— Stefan van den Akker

36

Eğer ayarlarsanız border-collapsestil collapseebeveyn masaya Eğer stil gerekir tr: (stilleri demo için inline olan)

<table style="border-collapse: collapse;">
  <tr>
    <td>No Border</td>
  </tr>
  <tr style="border:2px solid #f00;">
    <td>Border</td>
  </tr>
  <tr>
    <td>No Border</td>
  </tr>
</table>

Çıktı:

HTML çıkışı

— gündoğumu
kaynak

8

Ben de bunu yapmakla uğraşıyordum ve bu benim için en iyi seçenek gibi görünüyordu:

<style>
    tr { 
        display: table;            /* this makes borders/margins work */
        border: 1px solid black;
        margin: 5px;
    }
</style>

Hücreler artık diğer satırlardakilerle hizalanmayacağından, ancak kenarlık / renk biçimlendirme yine de düzgün çalıştığından, bunun değişken / otomatik sütun genişliklerinin kullanımını önleyeceğini unutmayın . Çözüm, TR ve TD'lere belirli bir genişlik vermektir (px veya%) .

Elbette, seçiciyi tr.myClassyalnızca belirli satırlara uygulamak isterseniz yapabilirsiniz . Görünüşe göre display: tableIE 6/7 için çalışmıyor, ancak muhtemelen bunlar için işe yarayabilecek başka hackler (hasLayout?) Var. :-(

— Simon East
kaynak

6

Bu çözüm yanlıştır: "display: table" tüm satırı bir tablo hücresine koyar --- tablonun diğer satırlarına göre biçimlendirmeyi kaybedersiniz. Bunu Firefox ve Chromium'da denedim.

— Yaakov Belch

Yaakov, sanırım kastettiğin şey, değişken sütun genişlikleri artık tablodaki diğer satırlarla hizalı değil (bu kemanta görüldüğü gibi: jsfiddle.net/MrKtw ) ama kenarlık / renk biçimlendirmesi hala iyi çalışıyor. Çözüm, TR ve TD'lere belirli bir genişlik (px veya%) vermektir.

— Simon East

Simon, ne demek istediğimi göstermek için keman çaldım ve kemanını değiştirdim. Şuna bakın: jsfiddle.net/a6DZV --- "display: table" biçimlendirmesini sadece bir satıra uyguluyorum . Gördüğünüz gibi, bu, bu satırı etkin bir şekilde tablonun bir hücresine dönüştürür. Başka bir deyişle: Tek satırlı tabloları başka bir tablonun hücresinin içine yerleştirmekle (ve bu iç tablonun sınırını göstermekle) aynı çıktıyı elde edersiniz. Çözümünüz DOM'da birkaç düğümü kaydediyor ancak o kadar uyumlu değil.

— Yaakov Belch

3

İşte bunu yapmanın yolu olabilecek tbody öğelerini kullanan bir yaklaşım. Bir tbody üzerinde kenarlığı ayarlayamazsınız (bir tr'de yapamayacağınız gibi) ancak arka plan rengini ayarlayabilirsiniz. Eğer elde etmek istediğiniz efekt, kenarlık yerine sıra grupları üzerinde bir arka plan rengiyle elde edilebilirse, bu işe yarayacaktır.

<table cellspacing="0">  
    <tbody>
        <tr>    
            <td>no border</td>    
            <td>no border here either</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
            <td>one</td>    
            <td>two</td>  
        </tr>  
        <tr>    
            <td>three</td>    
            <td>four</td>  
        </tr>  
    <tbody>
        <tr>    
             <td colspan="2">once again no borders</td>  
        </tr>  
    <tbody bgcolor="gray">
        <tr>    
             <td colspan="2">hello</td>  
        </tr>
    <tbody>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

— sipwiz
kaynak

2

<tbody>Etiketi kullanarak satırları gruplayın ve ardından stili uygulayın.

<table>
  <tr><td>No Style here</td></tr>
  <tbody class="red-outline">
    <tr><td>Style me</td></tr>
    <tr><td>And me</td></tr>
  </tbody>
  <tr><td>No Style here</td></tr>
</table>

Ve style.css'deki css

.red-outline {
  outline: 1px solid red;
}

— cSI
kaynak

1

Bunu yapmak için düşünebileceğim tek diğer yol, ihtiyacınız olan satırların her birini iç içe geçmiş bir tabloya çevrelemek. Bu, sınırın yapılmasını kolaylaştıracak, ancak potansiyel olarak diğer düzen sorunları yaratacaktır, genişliği tablo hücrelerinde manuel olarak ayarlamanız gerekecektir.

Yaklaşımınız, diğer düzen yeniden gereksinimlerinize bağlı olarak en iyisi olabilir ve burada önerilen yaklaşım sadece olası bir alternatiftir.

<table cellspacing="0">  
    <tr>    
        <td>no border</td>    
        <td>no border here either</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>one</td>    
                        <td>two</td>  
                  </tr>  
                  <tr>    
                      <td>three</td>    
                      <td>four</td>  
                  </tr>  
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">once again no borders</td>  
    </tr>  
    <tr>
        <td>
             <table style="border: thin solid black">
                  <tr>    
                        <td>hello</td>  
                   </tr>
             </table>
         </td>
    </tr>
    <tr>    
         <td colspan="2">world</td>  
    </tr>
</table>

— sipwiz
kaynak

Cevabınız için teşekkürler; Yine de düzen sorunları konusunda haklısınız - sütunların elle yapmadan sıralanmasını tercih ederim. Bir <tr> etiketine sınıf uygulamaya ne dersiniz - bu mümkün mü?

— Kyle Cronin

"Table-layout: fixed" içeren bir tablo kullanıyorsanız ve her sütunun genişliğini açıkça ayarlarsanız (<col> kullanarak veya yalnızca ilk satırdaki hücrelerin genişliğini ayarlayarak), sütunlar içeriğinden bağımsız olarak sıralanır. Tabloları iç içe geçirmenize bile gerek yok, üç ayrı tablo örneği iyi yapar.

— bobince

1

MxN hücrelerinin rastgele bir bloğunun etrafına bir sınır koyma gereksiniminize bağlı olarak, bunu Javascript kullanmadan yapmanın gerçekten daha kolay bir yolu yoktur. Hücreleriniz sabitlenmişse, yüzer kullanabilirsiniz, ancak bu başka nedenlerden dolayı sorunludur. Yaptığınız şey can sıkıcı olabilir ama sorun değil.

Tamam, bir Javascript çözümüyle ilgileniyorsanız, jQuery'yi (tercih ettiğim yaklaşım) kullanarak, bu oldukça korkutucu kod parçasına sahip olursunuz:

<html>
<head>

<style type="text/css">
td.top { border-top: thin solid black; }
td.bottom { border-bottom: thin solid black; }
td.left { border-left: thin solid black; }
td.right { border-right: thin solid black; }
</style>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<script type="text/javascript">
$(function() {
  box(2, 1, 2, 2);
});

function box(row, col, height, width) {
  if (typeof height == 'undefined') {
    height = 1;
  }
  if (typeof width == 'undefined') {
    width = 1;
  }
  $("table").each(function() {
    $("tr:nth-child(" + row + ")", this).children().slice(col - 1, col + width - 1).addClass("top");
    $("tr:nth-child(" + (row + height - 1) + ")", this).children().slice(col - 1, col + width - 1).addClass("bottom");
    $("tr", this).slice(row - 1, row + height - 1).each(function() {
      $(":nth-child(" + col + ")", this).addClass("left");
      $(":nth-child(" + (col + width - 1) + ")", this).addClass("right");
    });
  });
}
</script>
</head>
<body>

<table cellspacing="0">
  <tr>
    <td>no border</td>
    <td>no border here either</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
  </tr>
  <tr>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td colspan="2">once again no borders</td>
  </tr>
</tfoot>
</table>
</html>

Bunu yapmanın daha kolay yolları için memnuniyetle öneriler alacağım ...

— cletus
kaynak

1

Görünüşe göre td etiketlerine sınıflar mı ekliyorsunuz? Bu neden bazı sunucu tarafı komut dosyasıyla, statik olarak oluşturulmuş veya en kötü durumda yalnızca elle yapılamadı? Bana JavaScript kötüye kullanımı gibi görünüyor.

— Thomas

3

Aslında poster bir Javascript çözümü sordu. Yeterli bilgi olmadığı için Javascript kötüye kullanıldığını söyleyemezsiniz. Örneğin, kullanıcının tıklaması nedeniyle kenarlıklar mı ekleniyor? Öyleyse, bir sunucu çözümü yanlıştır.

— cletus

Bilgi eksikliği için üzgünüm. Bu, sunucu tarafında oluşturulacak, bu yüzden sınıfları manuel olarak ekleyebileceğim doğru, ancak JS çözümünün bunu yapmak için daha basit bir arayüz sağlaması hoşuma gidiyor. Bu yüzden muhtemelen JS ile gitmeyecek olsam da, görmek için iyi bir çözüm.

— Kyle Cronin

0

İşin püf noktası, gizemin çok az değişiklikle cevabı sayesinde anahat özelliği ile

bu sınıfı kullan

.row-border{
    outline: thin solid black;
    outline-offset: -1px;
}

sonra HTML'de

<tr>....</tr>
<tr class="row-border">
    <td>...</td>
    <td>...</td>
</tr>

ve sonuç umarım bu sana yardımcı olur

— Basheer AL-MOMANI
kaynak

-5

Daha kolay bir yol, tabloyu bir sunucu tarafı denetimi yapmaktır. Buna benzer bir şey kullanabilirsiniz:

Dim x As Integer
table1.Border = "1"

'Change the first 10 rows to have a black border
 For x = 1 To 10
     table1.Rows(x).BorderColor = "Black"
 Next

'Change the rest of the rows to white
 For x = 11 To 22
     table1.Rows(x).BorderColor = "White"
 Next

— Curtis
kaynak

1

OP bunu yapmanın daha kolay bir yolunu istiyor

— orique

2

Dikkatli olun, OP bunu HTML / CSS'de yapmanın daha kolay bir yolunu da istiyor. Sorusunun hiçbir yerinde VB veya VBA anahtar kelimesini görmüyorum. Yardım bölümümüze bir göz atmanızı öneririm: stackoverflow.com/help/how-to-answer İyi Şanslar.

— ForceMagic