CODEWITHSUNDEEP
htmlcss
radders
radders

Reputation: 923

Table internal borders not showing

I'm using the CSS class shown below to format a table. The table shows only an outside border, not internal borders.

There are no other styling options set, just the <table class="my-table">.

What have I missed / done wrong, please?

table.my-table {
        border: solid thin;
        border-collapse: separate;
        border-spacing: 0px;
        border-color: black;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        font-size: 14px;
    }
    
            table.my-table tbody th {
                background: rgb(28, 58, 112);
                background: rgba(28, 58, 112, 1);
                color: rgb(255,255,255);
                color: rgba(255,255,255,1);
            }
    
            table.my-table tbody tr:nth-child(even) {
                background: rgb(255, 255, 255);
                background: rgba(255, 255, 255, .8);
            }
    
            table.my-table tbody tr:nth-child(odd) {
                background: rgb(239, 239, 239);
                background: rgba(239, 239, 239, .8);
            }
    
            table.my-table tbody td {
                background: rgb(255, 255, 255);
                background: rgba(255, 255, 255, 1);
                color: rgb(0, 0, 0);
                color: rgba(0, 0, 0, 1);
            }
<table class="my-table">
  <tr>
    <td>test</td>
    <td>test 2</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test 2</td>
  </tr>
  <tr>
    <td>test</td>
    <td>test 2</td>
  </tr>
</table>

Upvotes: 2

Views: 2506

Answers (2)

Josh N
Josh N

Reputation: 25

The CSS border properties allow you to specify the style, width, and color of an element's border. In your code you set the style for the table, not for the individual cells in the table. To fix this simple add:

table.my-table tbody td {
            border: solid thin;

Upvotes: 1

Quentin
Quentin

Reputation: 944426

What have I missed / done wrong, please?

You've only set a border on the table.

The CSS border property is not equivalent to the obsolete border attribute.

If you want to set borders on the cells, then you have to write a selector which targets those cells and set the border on them.

Upvotes: 4

Related Questions