0

Estou trabalhando com um card que vai funcionar para retornar dados como (dia de hoje, mês atual, dia de ontem e enfim), mas gostaria de deixar o dia igual a imagem, não consegui usando tabelas, segue o código:

.mes-setado {
  letter-spacing: 15px;
  font-size: 35px;
  width: 100%;
  padding-left: 150px;
  float: right;
  margin-right: -5px;
  margin-bottom: 10px;
}

.ano-setado {
  letter-spacing: 3px;
  font-size: 35px;
  width: 100%;
  padding-left: 150px;
  float: right;
  margin-right: -5px;
}

.dia-setado {
  font-size: 80px;
  padding-top: 10px;
  width: 100%;
}

.simple {
  text-align: right;
  margin-right: 2.5px;
  margin-top: 5px;
}

.values {
  font-size: 25px;
  align-content: right;
  text-align: right;
  width: 100%;
  padding-bottom: 10.5px;
}

.tabela {
  width: 100%;
  margin-top: 10px;
  display: inline;
}

.info {
  width: 100%;
  border-top: 1px solid #000000;
  margin-top: 10.5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-12 col-sm-12 col-lg-12 row justify-content-center">
  <nb-card accent="info">
    <nb-card-body>
      <div class="row justify-content-center">
        <div class="container">
          <table class="tabela">
            <td class="dia-setado">23</td> <br>
            <td class="mes-setado">SET</td> <br>
            <td class="ano-setado">2019</td>
          </table>
        </div>
      </div>
      <div class="info"></div>
      <div>
        <div class="simple">Digitados</div>
        <div class="values">310.800</div>
        <div class="simple">Pagos</div>
        <div class="values">128.100</div>
      </div>
      <nb-progress-bar status="info" [value]="30"></nb-progress-bar>
    </nb-card-body>
  </nb-card>
</div>

Deve ficar assim

3
  • No que exatamente está com problema? A saída gerada ficou bem próxima a esperada. Aliás, os elementos <nb-card>, <nb-card-body>, etc não são nativos do HTML, o que sugere que está utilizando algo a mais que apenas HTML 5 e CSS 3.
    – Woss
    Commented 24/09/2019 às 14:14
  • O número está muito cima, não está alinhado com mês/ano. Perdão, editei agora colocando Bootstrap e Angular. Commented 24/09/2019 às 14:17
  • Sugiro também editar e listar quais são as diferenças que está buscando corrigir.
    – Woss
    Commented 24/09/2019 às 14:18

2 Respostas 2

1

Se vc está usando tabela vc tem que usar rowspan/colspan conforme precisar, além disso vc não deve montar a tabela com vc fez, jogando TDs dentro de uma Table... E não coloque display: inline; em uma tabela! A tabela tem que ser display:table;, ou então use divs e não uma table. Recomendo que leia isso Duas celulas de dados para uma de cabeçalho e tb a esse documentação que tem uns exemplos práticos https://www.w3schools.com/html/html_tables.asp

Além disso vc vai precisa tratar o line-height para o espaçamento vertical ficar mais "compacto" para isso eu coloquei line-hiegt de 100%, ou seja, 100% da altura do próprio caractere a grosso modo.

OBS: tudo que vc colocou e que não precisava como float:left etc eu deixei comentado... repare na quantidade de coisa ;)

.mes-setado {
    letter-spacing: 15px;
    font-size: 35px;
    /* width: 100%; */
    /* padding-left: 150px; */
    /* float: right; */
    /* margin-right: -5px; */
    /* margin-bottom: 10px; */
}

.ano-setado {
    letter-spacing: 3px;
    font-size: 35px;
    /* width: 100%; */
    /* padding-left: 150px; */
    /* float: right; */
    /* margin-right: -5px; */
    line-height: 100%;
}

.dia-setado {
    font-size: 80px;
    /* padding-top: 10px; */
    /* width: 100%; */
    line-height: 100%;
}

.simple {
    text-align: right;
    /* margin-right: 2.5px; */
    margin-top: 5px;
}

.values {
    font-size: 25px;
    /* align-content: right; */
    text-align: right;
    /* width: 100%; */
    padding-bottom: 10.5px;
}

.tabela {
    /* width: 100%; */
    margin-top: 10px;
    /* display: inline; */
}

.info {
    /* width: 100%; */
    border-top: 1px solid #000000;
    margin-top: 10.5px;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="col-md-12 col-sm-12 col-lg-12 row justify-content-center">
    <nb-card accent="info">
        <nb-card-body>
            <div class="row justify-content-center">
                <div class="container">
                    <table class="tabela">
                        <tr>
                            <td rowspan="2" class="dia-setado">23</td> 
                            <td class="ano-setado">2019</td>
                        </tr>
                        <tr>
                            <td class="ano-setado">2019</td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="info"></div>
            <div>
                <div class="simple">Digitados</div>
                <div class="values">310.800</div>
                <div class="simple">Pagos</div>
                <div class="values">128.100</div>
            </div>
            <nb-progress-bar status="info" [value]="30"></nb-progress-bar>
        </nb-card-body>
    </nb-card>
</div>

7
  • Consegui! Valeu! Commented 24/09/2019 às 16:41
  • @WandersonBueno legal que deu certo ai!! Se vc acha que a resposta te ajudou de alguma forma considere marca-la como aceita nesse ícone ✔ abaixo das setinhas ao lado da resposta ;)
    – hugocsl
    Commented 24/09/2019 às 16:42
  • Só mais uma dúvida, eu quero gerar mais dois cards desse, queria que ficasse um do lado do outro, mas do jeito que tá, eles ficam indo pra baixo, sabe algo que possa usar? Commented 24/09/2019 às 17:06
  • Nessa sua div <div class="col-md-12 col-sm-12 col-lg-12 row justify-content-center"> ela tem que estar dentro de uma outra div com a classe Row. E coloque assim e veja se resolve <div class="col-4">. @WandersonBueno Da uma olhada nessa outra resposta que vai te ajudar a entender o Grid do Bootstrap pt.stackoverflow.com/questions/182188/…
    – hugocsl
    Commented 24/09/2019 às 17:10
  • Consegui por um do lado do outro, mas estão colados. A dúvida agora além desta de estarem juntos é eu poder manter um tamanho só pros cards, porque os dois primeiros são idênticos. Mas o último é somente Mês/Ano. Ai quando eu altero, muda automaticamente o tamanho da largura. Commented 24/09/2019 às 18:34
0

Veja que algumas mudanças podem ser feitas apenas ajustando o CSS. Tente desta forma aqui tbm, embora o CSS fique mais comprido (aparentemente) mas vc pode utilizar suas próprias configurações e não ficar preso ao do Bootstrap.

body {
    line-height: 1 !important;
}

tr {
	width: 30% !important;
}

.dia-setado {
  font-size: 80px;
  padding-top: 0px;
  padding: 0px;
}

.mes-setado {
  letter-spacing: 12px;
  font-size: 35px;
  width: 100%;
  float: right;
  margin-right: -2px;
  margin-bottom: -18px;
  margin-top: 10px;
}

.ano-setado {
  letter-spacing: 3px;
  font-size: 35px;
  width: 100%;
  float: right;
  margin-right: -2px;
  margin-top: 15px;
}

.simple {
  text-align: right;
  font-size: 10px;
  margin-right: 2.5px;
  margin-top: 1px;
}

.values {
  font-size: 25px;
  align-content: right;
  text-align: right;
  width: 100%;
  padding-bottom: 1.5px;
}

.tabela {
  width: 100%;
  margin-top: 10px;
  display: inline;
}

.info {
  width: 100%;
  border-top: 1px solid #000000;
  margin-top: 0.5px;
}

.container {
    width: 100%;
    padding-right: 5px !important;
    padding-left: 15px;
    margin-right: 0px;
    margin-left: 10px;
}

.col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9{
	position: relative !important;
	width: 100% !important;
	max-height: 5rem;
	padding-right: 2px !important;
	padding-left: 2px !important;
}

.col-md-2{
	max-width: 12.3rem !important;
}

.col-md-5{
	max-width: 6rem !important;
}

.col-md-7{
	max-width: 6rem !important;
}

.col-md-10{
	max-width: 12.3rem !important;
}

.card {
    width: 18rem!important;
    border: 0px solid rgba(0,0,0,.125) !important;
}

.card-body {
    padding: 5px !important;
        padding-top: 5px !important;
        padding-right: 5px !important;
        padding-bottom: 5px !important;
        padding-left: 5px !important;
}

.row {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: 0px !important;
	max-width: 11.7rem !important;
}
<body>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 col-sm-2 col-lg-2 row justify-content-center">
  <div class="card">
  <div class="card " style="max-width: 180px;">
  <div class="row">
    <div class="col-md-5">
		<div class="tabela">
            <div class="dia-setado">23</div>
          </div>
    </div>
    <div class="col-md-7">
		<div class="tabela">
            <div class="mes-setado">SET</div>
            <div class="ano-setado">2019</div>
          </div>
      </div>
  </div>
	</div>
   
      <div class="info"></div>
    <div class="col-md-10">
		<div class="simple">Digitados</div>
        <div class="values">310.800</div>
        <div class="simple">Pagos</div>
        <div class="values">128.100</div>
        
    </div>
      <nb-progress-bar status="info" [value]="30"></nb-progress-bar>
    </div>
  </div>
</div>
</body>

1
  • Vou ver se consigo dessa forma, preciso colocar mais dois cards. Um é outro formato, o layout muda ai está me mudando a largura do card. Commented 24/09/2019 às 18:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .