Why does the border of tr not show unless the parent table tag has the border-collapse property set to collapse?

html:

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

css:

        table {
            height: 20px;
            width: 30px;
            border: solid 1px;
            border-collapse: collapse;
        }

        tr {
            border: 1px solid;
        }

Here is an image of the table:

If I comment out border-collapse: collapse; under table in the css, the row borders disappear:

In this link: https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse there is an example table where the borders are not collapsed(but set to separate, and that doesn't seem to make the borders on my example reappear either):

Here there are gaps between the red and orange borders. Why does my original table not show the row borders at all when the border-collapse property is commented out, instead of showing borders with gaps like in this mozilla example, or something visible at all?