How do I display in columns instead of a grid ? preference inside the <div> tag

Asked

Viewed 39 times

-3

       { data.data &&
     Object 
     .keys(data.data)
     .map(cli => {
       return(
           <tr key={cli}>
             
               <td>{data.data[cli].nome}</td>
               <td>{data.data[cli].endereco} </td>
               <td>{data.data[cli].telefone} </td>
               <td>{data.data[cli].email} </td>
                <td> 
                 </td>
           </tr>
       )


     })
      }
 

     </tbody>

     </table>
      
  </div>
    )


}
export default Clientes
javascript html css react

  • what is your doubt? because it is difficult to exchange the table for div?

  • You can use div, and resolve with css.

1 answer

2

Follow an example of columns with css only.

body {
    margin:0;
    padding:0;
    color:#000;
    background:#fff;
}
#geral {
    width:960px;
    margin:0 auto;
    background:#ddd;
}
#cabecalho {
    background:#fdd;
}
# conteudo-1 {
    background:#bfb;
}
#conteudo-2-1 {
    background:#ddf;
}
#conteudo-2-2 {
    background:#dff;
}
#rodape {
    background:#ff9;
}

#conteudo-1 {
    float:left;
    width:240px;
    background:#bfb;
}
#conteudo-2 {
    float:right;
    width:720px;
}

#conteudo-2-1 {
    float:left;
    width:480px;
    background:#ddf;
}
#conteudo-2-2 {
    float:right;
    width:240px;
    background:#dff;
}

#rodape {
    clear:both;/*posicionando o rodape abaixo das outras divs*/
    background:#ff9;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Layout 3 colunas</title>
<link type="text/css" rel="stylesheet" media="screen" href="estilos.css" />

</head>

<body>

<div id="geral">
    <div id="cabecalho">Cabeçalho</div>
    <div id="principal">
        <div id="conteudo-1">Pessoa</div>
        <div id="conteudo-2">
            <div id="conteudo-2-1">Cidade</div>
            <div id="conteudo-2-2">Telefone</div>
        </div>
    </div>
    <div id="rodape">Rodapé</div>
</div>

</body>
</html>

You can read more on:

https://www.devmedia.com.br/como-criar-um-layout-de-duas-colunas-com-html-e-css/37239

https://www.kadunew.com/blog/css/como-criar-um-layout-de-3-colunas-com-css

https://www.maujor.com/layout3col.shtml

Browser other questions tagged javascript html css react

You are not signed in. Login or sign up in order to post.