Border Around Specific Rows in a Table

Giving a border to an HTML table row, <tr>

You can set border properties on a tr element, but according to the CSS 2.1 specification, such properties have no effect in the separated borders model, which tends to be the default in browsers. Ref.: 17.6.1 The separated borders model. (The initial value of border-collapse is separate according to CSS 2.1, and some browsers also set it as default value for table. The net effect anyway is that you get separated border on almost all browsers unless you explicitly specifi collapse.)

Thus, you need to use collapsing borders. Example:

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

Border around specific rows in a table?

How about tr {outline: thin solid black;}? Works for me on tr or tbody elements, and appears to be compatible with the most browsers, including IE 8+ but not before.

Add border-bottom to table row <tr>

I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:

<tr class="border_bottom">

CSS:

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

How can I have borders around the table row, but not on any inner-cells?

Unfortunately tables aren't really designed to do what you are asking.

In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.

body {  font-family: sans-serif;}
#table {  border-collapse: collapse;  border-spacing: 0.3em;}
#table tr {  border: 2px solid blue;}
#table td {  padding: 1em;  text-align: center;}

<table id="table">  <tbody>    <tr>      <td>this</td>      <td>is</td>      <td>a table</td>    </tr>    <tr>      <td>with</td>      <td>rounded</td>      <td>cells</td>    </tr>  </tbody></table>

How to evenly add borders around table?

One approach is to give the whole table border-right and border-bottom, while giving all the cells the opposite, border-left and border-top.

table {  border-right: 1px solid blue;  border-bottom: 1px solid blue;}
td,th {  border-top: 1px solid blue;  border-left: 1px solid blue;}

<table cellpadding="10" cellspacing="0">  <thead>    <tr>      <th>Name</th>      <th>Value</th>    </tr>  </thead>  <tbody>    <tr>      <td>Joe</td>      <td>50</td>    </tr>    <tr>      <td>Mary</td>      <td>50</td>    </tr>    <tr>      <td>John</td>      <td>50</td>    </tr>    <tr>      <td>Kai</td>      <td>50</td>    </tr>  </tbody></table>

Border around row spanned table

try this:

<tbody>
  <tr class="colored">
    <td rowspan="6">A</td>
    <td rowspan="3">B</td>
    <td>C</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>D</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>E</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr class="colored">
    <td rowspan="3">B</td>
    <td>F</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>G</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>H</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
</tbody>
<tbody>
  <tr class="colored">
    <td rowspan="6">A</td>
    <td rowspan="4">B</td>
    <td>C</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>D</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>E</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>F</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr class="colored">
    <td rowspan="2">B</td>
    <td>G</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
  <tr>
    <td>H</td>
    <td> Input</td>
    <td> Input</td>
  </tr>
</tbody>

and this css :

th,
td {
  border: 1px solid black;
}

tbody .colored td[rowspan]:not(:first-child) {
  border-left: 2px solid red;
  border-top: 2px solid red;
  border-bottom: 2px solid red;
}

tbody .colored td:nth-of-type(n+2) {
  border-top: 2px solid red;
}

tbody tr td:last-child {
  border-right: 2px solid red;
}

tbody tr:last-child td:nth-child(n+1) {
  border-bottom: 2px solid red;
}

https://plnkr.co/edit/VYFXhZf0fnZqmr1BN1z6?p=preview

How to hide the border for specified rows of a table?

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.

In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.

Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.

table, tr, td {  border: 3px solid red;}tr.noBorder td {  border: 0;}

<table>  <tr>    <td>A1</td>    <td>B1</td>    <td>C1</td>  </tr>  <tr class="noBorder">    <td>A2</td>    <td>B2</td>    <td>C2</td>  </tr>  <tr>    <td>A3</td>    <td>A3</td>    <td>A3</td>  </tr></table>

---

Related Topics