Why are the boarders showing differently on a table?

Originally I had <div > and things like that because the main body of my site is in flex inside @media screen. This specific portion of my site is on @media print

Here is my code for it:

HTML

<table>
    <tr>
        <th>Drug Names</th>
        <th>Prescriber</th>
        <th>Dose/Pill</th>
        <th>Frequency</th>
        <th>Rx Number</th>
        <th>Pharmacy</th>
        <th >M</th>
        <th >T</th>
        <th >W</th>
        <th >T</th>
        <th >F</th>
        <th >S</th>
        <th >S</th>
        <th>Remaining
    </tr>
</table>

CSS

table {
    display: table;
    border: 1px solid black;
    border-collapse: collapse;
    width: 100%;
}

tr {
    display: table-row;
    border: 1px solid black;
    border: 1px solid black;
    border-collapse: collapse;
}

th {
    display: table-cell;
    font-weight: bold;
    border: 1px solid black;
    border-collapse: collapse;
    height: 50px;
    vertical-align: middle;
}

td {
    display: table-cell;
    border: 1px solid black;
    border-collapse: collapse;
    vertical-align: middle;
    text-align: center;
}

.tinyBoxes {
    width: 0.5cm;
    height: 0.5cm;
    display: table-cell;
    font-weight: bold;
    border: 1px solid black;
    border-collapse: collapse;
    vertical-align: middle;
}

An Image of what it's displaying on Chrome (most current version): Image of table

Any ideas why the borders are being different?

ADDITIONAL INFO

I did a JSFiddle and it seems to work just fine on there. I guess it's a browser thing...?

CodePudding user response：

Remove

border: 1px solid black;

from 'table', 'tr' tags and '.tinyBoxes' class in your CSS code, and just write it in the 'th' tag, then it's OK.