Creating a CSS card

Question

Well, I’m trying to turn a table into cards when the site opens on a mobile device, but I don’t know much about CSS. I’m basing myself on this model, in my card turned only the data, but the header disappeared, could someone explain to me what happened? (I am using JSX)

My Table:

   <Table className="customers center table-cfg">
        <thead>
          <tr>
            <th>Login</th>
            <th>Nome da Empresa</th>
            <th>CNPJ</th>
            <th>QTD de Beneficiários</th>
          </tr>
        </thead>
        <tbody>
          {this.state.companies.map((item, index) => (
            <tr key={item.login}>
              <td>{item.login}</td>
              <td>{item.name_company}</td>
              <td>{item.cnpj}</td>
              <td>{item.amount_beneficiary}</td>
            </tr>
          ))
          }
        </tbody>
      </Table>

My CSS:

  @media screen and (max-width: 480px){
    .content{width: 100%}

    /* .table-cfg thead{display: none}
    .table-cfg {display: none} */

    th{display: flex; flex-direction: column}

    table {
      border: 0;
    }

    table caption {
      font-size: 1.3em;
    }

    table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
    }

    table tr {
      border-bottom: 3px solid #ddd;
      display: block;
      margin-bottom: .625em;
    }

    table td {
      border-bottom: 1px solid #ddd;
      display: block;
      font-size: .8em;
      text-align: right;
    }

    table td::before {
      /*
      * aria-label has no advantage, it won't be read inside a table
      content: attr(aria-label);
      */
      content: attr(data-label);
      float: left;
      font-weight: bold;
      text-transform: uppercase;
    }

    table td:last-child {
      border-bottom: 0;
    }
  }

My result:

Answer 1

Opa Leandro all right my buddy?

see that in the example you sent in each td there is an attribute data-label follow the example:

<tr>
   <td data-label="Account">Visa - 3412</td>
   <td data-label="Due Date">04/01/2016</td>
   <td data-label="Amount">$1,190</td>
   <td data-label="Period">03/01/2016 - 03/31/2016</td>
</tr>

the title you see does not come from thead, because it is "hidden" through this css snippet:

  table thead {
      border: none;
      clip: rect(0 0 0 0);
      height: 1px;
      margin: -1px;
      overflow: hidden;
      padding: 0;
      position: absolute;
      width: 1px;
  }

the title in the responsive data-label, I hope that was clear.