How to Apply a Border Only Inside a Table

How can I apply a border only inside a table?

If you are doing what I believe you are trying to do, you'll need something a little more like this:

table {
  border-collapse: collapse;
}
table td, table th {
  border: 1px solid black;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}

jsFiddle Demo

The problem is that you are setting a 'full border' around all the cells, which make it appear as if you have a border around the entire table.

Cheers.

EDIT: A little more info on those pseudo-classes can be found on quirksmode, and, as to be expected, you are pretty much S.O.L. in terms of IE support.

css table inner border only

No they didn't do it that way, it's done in a nice way! :)

This removes the right border from the cells:

.sidebar-stats td:last-child, .sidebar-stats th:last-child {
    border-right: 0 none;
}

(In the same way you can remove the bottom-border for the last row. You can use Firebug to analyse their CSS, helps a lot!)

How to make a border inside of a table?

Without CSS, the only HTML elements which have native borders are table and img. I'd go with a nested table here:

<table border="4">

     <caption>Table - 6 -</caption>

        <tr>

            <th rowspan="2"><table border="4"><tr><td>Item 1</td></tr></table></th>

            <td>Item 2</td>

            <td>Item 3</td>

            <td>Item 4</td>

        </tr>

        <tr>

            <td>Item 5</td>

            <td>Item 6</td>

            <td>Item 7</td>

        </tr>

</table>

Bootstrap table with borders only on the inside

Its very cumbersome, but this is the best I got.
USe bootstrap's border utility classes https://getbootstrap.com/docs/4.1/utilities/borders/

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">

  <title>Overlay</title>

</head>

<body>

  <div class="container">

  <table class="table" style="margin-top: 10px;">

  <thead>

    <tr>

      <th scope="col" class="border-top-0 border-right border-bottom-0">#</th>

      <th scope="col" class="border-top-0 border-right border-bottom-0">First</th>

      <th scope="col" class="border-top-0 border-right border-bottom-0">Last</th>

      <th scope="col" class="border-top-0 border-right border-bottom-0 border-right-0">Handle</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td scope="row" class="border-right border-bottom-0">1</td>

      <td class="border-right border-bottom-0"> Mark</td>

      <td class="border-right border-bottom-0">Otto</td>

      <td class="border-right border-bottom-0 border-right-0">@mdo</td>

    </tr>

    <tr>

      <td scope="row" class="border-right border-bottom-0">1</td>

      <td class="border-right border-bottom-0"> Mark</td>

      <td class="border-right border-bottom-0">Otto</td>

      <td class="border-right border-bottom-0 border-right-0">@mdo</td>

    </tr>

    <tr>

      <td scope="row" class="border-right border-bottom-0">1</td>

      <td class="border-right border-bottom-0"> Mark</td>

      <td class="border-right border-bottom-0">Otto</td>

      <td class="border-right border-bottom-0 border-right-0">@mdo</td>

    </tr>

  </tbody>

</table>

</div>

</body>

CSS - Border only inside the table with the cell spacing

If you're trying to write CSS rules for tables on which you've defined the cellspacing attribute, a solution could be this :

table[cellspacing] {
  border-collapse: collapse;
  border-spacing: 4px;
}
table[cellspacing] td, table[cellspacing] th {
  border: 1px solid black;
}

But it would be much cleaner and more efficient to give a class to your table (<table class="withspace">). So you would more classically do

table.withspace {
  border-collapse: collapse;
  border-spacing: 4px;
}
table.withspace td, table.withspace th {
  border: 1px solid black;
}

EDIT : just in case, if what you want is simply to have some space in your cells, add a padding value in your css :

table {
  border-collapse: collapse;
  border-spacing: 4px;
}
table td, table th {
  border: 1px solid black;
  padding: 4px;
}

Table outline border and column border only in Bootstrap

The problem is that bootstrap overwrites part of your definitions. To avoid this, you can make certain CSS !important.

EDIT: Horizontal lines between table cells removed.

.table {

  border: 1px solid black;

}

.table thead th {

  border-top: 1px solid #000!important;

  border-bottom: 1px solid #000!important;

  border-left: 1px solid #000;

  border-right: 1px solid #000;

}

.table td {

  border-left: 1px solid #000;

  border-right: 1px solid #000;

  border-top: none!important;

}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />

<table class="table table-small">

  <thead>

    <tr>

      <th>#</th>

      <th>Name</th>

      <th>Col1</th>

      <th>Col2</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>1</td>

      <td>name</td>

      <td>123</td>

      <td>456</td>

    </tr>

    <tr>

      <td>2</td>

      <td>name2</td>

      <td>xyz</td>

      <td>abc</td>

    </tr>

    <tr>

      <td>1</td>

      <td>name</td>

      <td>123</td>

      <td>456</td>

    </tr>

    <tr>

      <td>2</td>

      <td>name2</td>

      <td>xyz</td>

      <td>abc</td>

    </tr>

    <tr>

      <td>1</td>

      <td>name</td>

      <td>123</td>

      <td>456</td>

    </tr>

    <tr>

      <td>2</td>

      <td>name2</td>

      <td>xyz</td>

      <td>abc</td>

    </tr>

    <tr>

      <td>1</td>

      <td>name</td>

      <td>123</td>

      <td>456</td>

    </tr>

    <tr>

      <td>2</td>

      <td>name2</td>

      <td>xyz</td>

      <td>abc</td>

    </tr>

  </tbody>

</table>

Manage Borders in nested tables

Hope this will help you

html

<table>
<tr>
<td>somedata</td>
<td>somedata</td>
<td>somedata</td>
<td>somedata</td>
<td>somedata</td>
<td>somedata</td>
<td>
  <table>
    <tr>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
    </tr>
    <tr>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
    </tr>
    <tr>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
      <td>somedata</td>
    </tr>
  </table>
</td>
</<tr>
</table>

css

table {
border-collapse: collapse;
}
table table tr td:first-child {
  border-left: 1px solid #ccc;
}
table table tr td:last-child {
  border-right: 1px solid #ccc;
}
table table tr:first-child td {
  border-top: 1px solid #ccc;
}
table table tr:last-child td {
  border-bottom: 1px solid #ccc;
}

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.