Tablo satırına kenarlık alt kısmı ekle <tr>

3 x 3 bir tablo var. Her satırın alt için bir kenarlık eklemek trve belirli bir renk vermek için bir yol gerekir .

İlk önce doğrudan yolu denedim, yani:

<tr style="border-bottom:1pt solid black;">

Ama bu işe yaramadı. Bu yüzden böyle CSS ekledim:

tr {
border-bottom: 1pt solid black;
}

Bu hala işe yaramadı.

CSS kullanmayı tercih ederim çünkü o zaman styleher satıra bir özellik eklemem gerekmiyor . İçin bir borderözellik eklemedim <table>. Umarım bu CSS'mi etkilemez.

Daha önce böyle bir sorunum vardı. trDoğrudan bir kenarlık stili alabileceğini sanmıyorum . Benim geçici çözüm tds satırındaki stil oldu :

<tr class="border_bottom">

CSS:

tr.border_bottom td {
  border-bottom:1pt solid black;
}

border-collapse:collapseTablo kuralınıza ekleyin :

table { 
    border-collapse: collapse; 
}

bağlantı

border-collapse:collapseMasa ve border-bottom: 1pt solid black;tr üzerinde kullanın

kullanım

border-collapse:collapse Nathan'ın yazdığı ve

td { border-bottom: 1px solid #000; }

Burada pek çok eksik cevap var. Eğer kenarlık uygulayamaz yana tretiketi, sen bunu uygulamak gerekmez tdya thşöyle etiketler:

td {
  border-bottom: 1pt solid black;
}

Bunu yaptığınızda td, her biri arasında küçük bir boşluk bırakılır; bu, kenarlığın etiketmiş gibi görünmesini istiyorsanız büyük olasılıkla istenmez tr. "Boşlukları doldurmak" için, öğedeki border-collapseözelliği kullanmanız tableve değerini şu şekilde ayarlamanız collapsegerekir:

table {
  border-collapse: collapse;
}

kullanım

table{border-collapse:collapse}
tr{border-top:thin solid}

"İnce katı" yı CSS özellikleri ile değiştirin.

Satırı bir blok olarak görüntüle.

tr {
    display: block;
    border-bottom: 1px solid #000;
}

ve alternatif renkleri kolayca görüntülemek için:

tr.oddrow {
    display: block;
    border-bottom: 1px solid #F00;
}

box-shadowBir tröğenin kenarlığını taklit etmek için özelliği kullanabilirsiniz . box-shadowKalınlığı ayarlamak için Y konumunu (aşağıda 2 piksel olarak temsil edilir) ayarlayın.

tr {
  -webkit-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  -moz-box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.99);
}

Eklemeyi denedim

    table {
      border-collapse: collapse;
    }   

yanında

    tr {
      bottom-border: 2pt solid #color;
    }

ve sonra neyin işe yaradığını görmek için sınır çöküşünü yorumladı. Sadece alt sınır özellikli tr seçicinin benim için çalışmasını sağladı!

Sınır CSS yok ex.

Canlı Sınır Fotoğrafı Yok

CSS Sınırı ör.

Sınır fotoğrafı canlı içeren tablo

Bu yöntemi kullanırken, td elemanları arasındaki boşluğun sınırda bir boşluğa neden olduğunu, ancak korkusu olmadığını buldum ...

Bunun bir yolu:

<tr>
    <td>
        Example of normal table data
    </td>

    <td class="end" colspan="/* total number of columns in entire table*/">
        /* insert nothing in here */ 
    </td>
</tr>

CSS ile:

td.end{
    border:2px solid black;
}

<td style="border-bottom-style: solid; border-bottom: thick dotted #ff0000; ">

Aynısını tüm satıra da yapabilirsiniz.

Orada border-bottom-style, border-top-style, border-left-style, border-right-style. Ya da sadeceborder-style bu aynı anda dört sınırın tümüne uygulanır.

Daha fazla bilgiyi burada görebilirsiniz (ve KENDİNİZİ çevrimiçi DENEYİN )

Birkaç ilginç cevap. Sadece bir kenar alt (veya üst) istediğiniz için iki tane daha var. 3 piksel kalınlığında mavi bir kenarlık istediğinizi varsayarsak. Stil bölümüne ekleyebilirsiniz

.blueB {background-color:blue; height:3px} or
hr {background-color:blue; color:blue height:3px}

Tablo kodunda da

<tr><td colspan='3' class='blueB></td></tr> or
<tr><td colspan='3'><hr></td></tr>

Buna başka bir çözüm de border-spacingmülktür:

table td {
  border-bottom: 2px solid black;
}

table {
  border-spacing: 0px;
}

<table>
 <tr>
   <td>ABC</td>
   <td>XYZ</td>
</table>

Altta CSS sınırı yok:

<table>
    <thead>
        <tr>
            <th>Title</th>
        </tr>
        <tr>
            <th>
                <hr>
            </th>
        </tr>
    </thead>
</table>

Tr öğesine sınır koyamazsınız. Bu benim için firefox ve IE 11'de çalıştı:

<td style='border-bottom:1pt solid black'>

HTML

<tr class="bottom-border">
</tr>

CSS

tr.bottom-border {
  border-bottom: 1px solid #222;
}