Brand-onder toevoegen aan tabelrij <tr>

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

<table>
  <tr><td>A1</td><td>B1</td><td>C1</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
  <tr><td>A2</td><td>B2</td><td>C2</td></tr>
</table>

Antwoord 3, autoriteit 17%

Gebruik border-collapse:collapseop tafel en border-bottom: 1pt solid black;op de tr

Antwoord 4, autoriteit 11%

Gebruik

border-collapse:collapsezoals Nathan schreef en je moet instellen

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

Antwoord 5, autoriteit 8%

Er zijn hier veel onvolledige antwoorden. Aangezien u geen rand kunt toepassen op de tag tr, moet u deze als volgt toepassen op de tags tdof th:

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

Als je dit doet, blijft er een kleine spatie tussen elke td, wat waarschijnlijk niet wenselijk is als je wilt dat de rand eruitziet alsof het de tr-tag is. Om bij wijze van spreken “de gaten op te vullen”, moet u de eigenschap border-collapseop het element tablegebruiken en de waarde ervan instellen op collapse, zoals zo:

table {
  border-collapse: collapse;
}

Antwoord 6, autoriteit 3%

Je kunt de eigenschap box-shadowgebruiken om een rand van een tr-element te vervalsen. Pas de Y-positie van box-shadowaan (hieronder weergegeven als 2px) om de dikte aan te passen.

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

Antwoord 7, autoriteit 2%

Ik heb geprobeerd toe te voegen

   table {
      border-collapse: collapse;
    }   

naast de

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

en becommentarieerde toen border-collapse om te zien wat werkte. Alleen de tr-selector met eigenschap aan de onderkant werkte voor mij!

No Border CSS ex.

Geen randfoto live

CSS-grens bijv.

Tabel met randfoto live

Antwoord 8, autoriteit 2%

Gebruik

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

Vervang “thin solid” door CSS-eigenschappen.

Antwoord 9, autoriteit 2%

Geef de rij weer als een blok.

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

en om eenvoudig alternatieve kleuren weer te geven:

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

10

Ik vond bij het gebruik van deze methode dat de ruimte tussen de TD-elementen een kloof heeft veroorzaakt om in de grens te vormen, maar geen angst hebben …

One Way Dog Dit:

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

Met de CSS:

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

11

Nog een oplossing hiervoor is border-spacingObject:

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

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

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

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

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

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

table tbody tr {
    position : relative; # to contain the ::after element within the table-row
}
table tbody tr td {
    position : relative; # needed to apply a z-index
    z-index : 2; # needs to be higher than the z-index on the tr::after element
}
table tbody tr::after {
    content : '';
    position : absolute;
    z-index : 1; # Add a z-index below z-index on TD so you can still select data from your table rows :)
    top : 0px;
    left : 0px;
    width : 100%;
    height : 100%;
    border : 1px solid green; # Style your border here, choose if you want a border bottom, top, left, etc ...
}

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

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