响应表变形

Question

我正在创建以下响应表，但这不是我想要的：

color

table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
	max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    font-family: arial;
}
th, td {
    border: 1px solid #000;
}
th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 0 1px 0 0 #ddd, 0 -5px 0 0 #fff;
}
thead {
    height: 37px;
}
.teste th {
    top: 20px;
    padding-bottom: 0;
    padding-top: 0;
}
.table {
    border-bottom: #999999 solid 1px;
    width: 100%;
    margin-bottom: 20px;
}

.table th,
.table td {
    border-right: #999999 solid 1px;
    font-size: 8px;
    padding: 8px;
    line-height: 10px;
    text-align: left;
    vertical-align: middle;
}

.table td:last-child {
    border-right: 0;
}

.table thead th {
    font-weight: normal;
    background-color: #005dab;
    color: #fff;
    font-size: 8px;
}

.table tbody > tr:nth-child(odd) > td,
.table tbody > tr:nth-child(odd) > th {
    background-color: #f8f8f8;
}


/* Small Sizes */
@media (max-width: 767px) {

    /* Responsive Table */
    .table-responsive {
        /* display: block; */
        position: relative;
        width: 100%;
    }

    .table-responsive thead,
    .table-responsive tbody,
    .table-responsive th,
    .table-responsive td,
    .table-responsive tr {
        /* display: block; */
    }

    .table-responsive td,
    .table-responsive th {
        height: 35px;
    }

    .table-responsive thead {
        /* float: left; */
    }

    .table-responsive tbody {
        width: auto;
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .table-responsive tbody tr {
        /* display: inline-block; */
    }


    .table td:last-child {
        border-right: #999999 solid 1px;
    }
}

如果在计算机屏幕上查看，则返回：

如果它在移动屏幕上，则如下所示：

页眉的外观不同，即使垂直方向的外观也应与水平页眉的外观相同。

通过使用<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <div class="row"> <div class="col-xs-12 tabela"> <table class="table table-responsive table-condensed"> <thead> <tr> <th style="display: none" rowspan=2>Id</th> <th style="font-size: 12px; height: 36px" rowspan=2>Produtos</th> <th style="font-size: 12px" colspan=2>No Carro</th> <th style="font-size: 12px" colspan=2>Na Prateleira</th> <th style="font-size: 12px" colspan=2>Data na Emb.</th> <th style="font-size: 12px" rowspan=2>Observação</th> </tr> <tr class="teste"> <th style="font-size: 12px">Tem</th> <th style="font-size: 12px">Não Tem</th> <th style="font-size: 12px">Tem</th> <th style="font-size: 12px">Não Tem</th> <th style="font-size: 12px">Tem</th> <th style="font-size: 12px">Não Tem</th> </tr> </thead> <tbody> <tr> <tbody> <?php $y = 0; do{ $property = ($produto["Descricao"]==="1 Desinfetante de Surpeficies" || $produto["Descricao"]==="Saco/Caixa c/ Cotonetes" || $produto["Descricao"]==="1 Rolo Sacos Lixo Azuis" || $produto["Descricao"]==="1 Rolo Sacos Lixo Preto" || $produto["Descricao"]==="1 Rolo Sacos Lixo Verdes" || $produto["Descricao"]==="Esponjas de Banho" || $produto["Descricao"]==="Esponjas c/ Gel" || $produto["Descricao"]==="Laminas Barbear" || $produto["Descricao"]==="1 Secador c/ Ponta" || $produto["Descricao"]==="3 Aventais" || $produto["Descricao"]==="1 Pinça" || $produto["Descricao"]==="1 Alicate" || $produto["Descricao"]==="Resguardos" || $produto["Descricao"]==="Bocais" || $produto["Descricao"]==="Caneta de Acetato" || $produto["Descricao"]==="Carro Higienizado")? "disabled" : "required"; ?> <tr> <td style="display: none"><input type="text" name="IdProduto<?php echo $produto[$y]; ?> " value="<?php echo $produto ["Id"]; ?>"></td> <td style="font-size: 12px"><?php echo $produto ["Descricao"]; ?></td> <td><input style="font-size: 12px" type="radio" name="Sim<?php echo $produto[$y]; ?>" class="r" value="Ok" required></td> <td><input style="font-size: 12px" type="radio" name="Sim<?php echo $produto[$y]; ?>" class="r" value="Não Ok" required></td> <td><input style="font-size: 12px" type="radio" name="Stock<?php echo $produto[$y]; ?>" class="p" value="Ok"></td> <td><input style="font-size: 12px" type="radio" name="Stock<?php echo $produto[$y]; ?>" class="p" value="Não Ok"></td> <td><input style="font-size: 12px" type="radio" name="DataP<?php echo $produto[$y]; ?>" value="Ok" <?php echo $property; ?>></td> <td><input style="font-size: 12px" type="radio" name="DataP<?php echo $produto[$y]; ?>" value="Não Ok" <?php echo $property; ?>></td> <td><textarea style="font-size: 12px" type="text" class="Observacao" name="Observacao3<?php echo $produto[$y]; ?>" rows="2"></textarea></td> </tr> <?php $y++; } while($produto = $result->fetch_assoc()); ?> </tbody> </table> </div> </div> </div>和<thead>，问题出在<tr>和rowspan之内。 我已经尝试过更改CSS，并且在移动设备上查看时无法放置正确的表格标题