@media(min-width: 1200px){
    .table thead{
        display: none;
    }

    .table, .table tbody, .table tr, .table td{
        display: block;
        width: 100%;
    }

    .table tr{
        margin-bottom: 15px;
    }

    .table td{
        text-align: right;
        padding-left: 50%;
        text-align: right;
        position: relative;
    }

    .table td::before{
       
        position: absolute;
        left: 0;
        width: 50%;
        padding-left: 15px;
        font-weight: bold;
        text-align: left;

    }
}

body {
    margin: 0;
    padding:20px;
}

*{
    box-sizing: border-box;
}

.table{
    width: 100%;
    border-collapse: collapse;
}

.table td, .table th{
    padding: 12px 15px;
    border: 1px solid; 
    text-align: center;
    font-size: 16px;
}

.table th{
    background-color: black;
    color: #ffffff
}

.table tbody tr:nth-child(even){
    background-color: #f5f5f5;
}

@media screen and (min-width: 1200px){

    tbody{
        border: 2px solid black;
      
    }  
    }
  

td:nth-of-type(1):before { content: "Bruker:";}