Bir HTML tablo satırına bir sınır verme, <tr>

O, bir tablo satırını sınır mümkün mü <tr>biri yerine, tek tek hücrelere kenarlık verme gitmek de <td>olduğu gibi,

<table cellpadding="0" cellspacing="0" width="100%" style="border: 1px;" rules="none">
    <tbody>
        <tr>
            <th style="width: 96px;">Column 1</th>
            <th style="width: 96px;">Column 2</th>
            <th style="width: 96px;">Column 3</th>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>

        <tr>
            <td style="border-left: thin solid; border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid;">&nbsp;</td>
            <td style="border-top: thin solid; border-bottom: thin solid; border-right: thin solid;">&nbsp;</td>
        </tr>

        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </tbody>
</table>

Bu, verilenin etrafında bir sınır verir, <tr>ancak tek tek hücrelerin etrafında bir sınır gerektirir.

<tr>Sadece tek seferde sınır verebilir miyiz ?

→ jsFiddle

borderBir tröğe üzerinde özellikler ayarlayabilirsiniz , ancak CSS 2.1 spesifikasyonuna göre, bu tür özelliklerin tarayıcılarda varsayılan olma eğiliminde olan ayrılmış kenarlık modelinde hiçbir etkisi yoktur. Ref .: 17.6.1 Ayrılmış sınırlar modeli . ( Başlangıç değeri border-collapseolan separateCSS 2.1 göre ve bazı tarayıcılar da olarak ayarlamak varsayılan değer için table. Neyse net etkisi size sürece açıkça specifi neredeyse tüm tarayıcılarda sınır ayrılırsak olmasıdır collapse.)

Bu nedenle, daralan sınırları kullanmanız gerekir. Misal:

<style>
table { border-collapse: collapse; }
tr:nth-child(3) { border: solid thin; }
</style>

Kesinlikle! Sadece kullan

<tr style="outline: thin solid">

hangi sırayı seversin. İşte bir keman .

Tabii ki, insanların bahsettiği gibi, bunu bir kimlik, sınıf veya dilerseniz başka bir yolla yapabilirsiniz.

Evet. Cevabımı güncelledimDEMO

table td {
    border-top: thin solid; 
    border-bottom: thin solid;
}

table td:first-child {
     border-left: thin solid;
}

table td:last-child {
     border-right: thin solid;
}

Yalnızca bir tanesini biçimlendirmek <tr>istiyorsanız, bunu bir sınıfla yapabilirsiniz: İkinci DEMO

CSS sınıflarından yararlanın:

tr.border{
    outline: thin solid;
}

ve şu şekilde kullanın:

<tr class="border">...</tr>

Bir tr öğesindeki box-shadow özelliğini sınır için bir alt başlık olarak kullanabilirsiniz. Bir artı olarak, aynı öğe üzerindeki herhangi bir border-radius özelliği kutu gölgesine de uygulanacaktır.

box-shadow: 0px 0px 0px 1px rgb(0, 0, 0);

Sol hücre:

style="border-style:solid;border-width: 1px 0px 1px 1px;"

orta hücre (ler):

style="border-style:solid;border-width: 1px 0px 1px 0px;"

sağ hücre:

style="border-style:solid;border-width: 1px 1px 1px 0px;"

sınır aralığı ekleme: 0rem 0.5rem; hücreler arasında boşluk bırakmadan, altındaki her hücre (td, th) öğeleri için bir boşluk oluşturur

    table.app-table{
        border-collapse: separate;
        border-spacing: 0rem 0.5rem;
    }
    table.app-table thead tr.border-row the,
    table.app-table tbody tr.border-row td,
    table.app-table tbody tr.border-row th{
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        vertical-align: middle;
        white-space: nowrap;
        font-size: 0.875rem;
    }

    table.app-table thead tr.border-row th:first-child,
    table.app-table tbody tr.border-row td:first-child{
        border-left: 1px solid #EAEAEA;
    }

    table.app-table thead tr.border-row th:last-child,
    table.app-table tbody tr.border-row td:last-child{
        border-right: 1px solid #EAEAEA;
    }

Bununla uzun bir süre mücadele ettikten sonra, şaşırtıcı derecede basit cevabın, tablonun her satırını aynı sayıda hücreye doldurmak için tabloyu boş hücrelerle doldurmak olduğu sonucuna vardım (Colspan hesaba katılarak). Bilgisayar tarafından oluşturulan HTML ile bunu düzenlemek çok basittir ve karmaşık geçici çözümlerle mücadele etmeyi önler. Çizim aşağıdaki gibidir:

<h3>Table borders belong to cells, and aren't present if there is no cell</h3>
<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>


<h3>Simple solution, artificially insert empty cells</h3>

<table style="border:1px solid red; width:100%; border-collapse:collapse;">
    <tr style="border-top:1px solid darkblue;">
        <th>Col 1<th>Col 2<th>Col 3
    <tr style="border-top:1px solid darkblue;">
        <td>Col 1 only<td><td>
    <tr style="border-top:1px solid darkblue;">
        <td colspan=2>Col 1 2 only<td>
    <tr style="border-top:1px solid darkblue;">
        <td>1<td>2<td>3

</table>