为什么寄宿生在 table 上表现不同？

Question

最初我有 <div class="tr"> 之类的东西，因为我网站的主体在 flex 里面 @media screen。我网站的这个特定部分位于 @media print

这是我的代码：

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 class="tinyBoxes">M</th>
        <th class="tinyBoxes">T</th>
        <th class="tinyBoxes">W</th>
        <th class="tinyBoxes">T</th>
        <th class="tinyBoxes">F</th>
        <th class="tinyBoxes">S</th>
        <th class="tinyBoxes">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;
}

它在 Chrome 上显示的图像（最新版本）：Image of table

知道为什么边界不同吗？

附加信息

我做了一个 JSFiddle，它似乎在那里工作得很好。我想这是浏览器的问题...?

Answer 1

移除

border: 1px solid black;

来自 'table'、'tr' 标签和 '.tinyBoxes' class 在您的 CSS 代码中，只需将其写在 'th' 标签中，那就OK了。

为什么寄宿生在 table 上表现不同？

Why are the boarders showing differently on a table?

html

css

border

border-collapse