LINE-HEIGHT is not working on my table

Asked

Viewed 78 times

-2

* {
	font-family: arial;
}
body {
	padding: 0;
	margin: 0;
}
.escopo {
	width: 100%;
	height: 200px;
	background-color: yellow;
}
.margem_escopo {
	width: 1000px;
	height: 200px;
	margin: auto;
}
.tabela {
	border: 1px solid;
	width: 350px;
	height: 198px;
	background-color: red;
	margin: auto;
}
.style_tabela {
	margin: auto;
}
td {
	border: 1px solid;
	
}
tr {
	border: 1px solid;
}
td.verde:hover{
    	
    	background-color: green;
    	/*display: block;*/
    }
table.style_tabela {
	border-collapse: collapse;
}
<!DOCTYPE html>
	
	<html lang = "pt-br">
		<head>
			
			<meta charset = "UTF-8"/>
			<title>Cabeçalho</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>
			
			<div class = "escopo">
				
				<div class = "margem_escopo">
					
					<div class = "tabela">
						
						<table class = "style_tabela" >
							<tr>
								
								<td class = "verde">Gomo</td>
								<td>Tesla</td>
								<td>Riuta</td>
								<td>Ferna</td>
								<td>Romã</td>
								<td>Célula</td>
								<td>Atacado</td>
							</tr>
							<tr>
								
								<td>Gomo</td>
								<td>Tesão</td>
								<td>Riuta</td>
								<td>Ferna</td>
								<td>Romã</td>
								<td>Célula</td>
								<td>Atacado</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</body>
	</html>

I wanted him to stay that way...

Já tentei de tudo mas as características só se inserem nas células.

I await your return!

html css div table

  • Julio, your CSS code doesn’t have any line-height being defined.

  • Exactly. When I put in any DIV of the TABLE tag it gets weird. Just insert that you will see.

  • I learned that it was to align vertically texts. How should I do with this table?

  • Have you ever thought about using the display: flex;?

  • I can insert directly into the CLASS DIV that holds the table?

  • Look at the answer I put, I think it helps you!

  • You want to align what? The table in the center of the <div> vertically? .

Show 2 more comments

2 answers

0


To solve this type of problem, the most recommended method is the display: flex;

Try to change the css of his .table to the following form:

.tabela {
    border: 1px solid;
    width: 350px;
    height: 198px;
    background-color: red;
    margin: auto;
    display: flex;
}

I believe that’s the answer you need.

See this guide to help you better with flex: https://origamid.com/projetos/flexbox-guia-completo/

  • Dude you just solved the problem in the most objective and direct way!

  • I’m glad he helped you, man!

0

You can center using translateY(-50%), but you have to use it too top: 50% and position: relative on the table.

* {
	font-family: arial;
}
body {
	padding: 0;
	margin: 0;
}
.escopo {
	width: 100%;
	height: 200px;
	background-color: yellow;
}
.margem_escopo {
	width: 1000px;
	height: 200px;
	margin: auto;
}
.tabela {
	border: 1px solid;
	width: 350px;
	height: 198px;
	background-color: red;
	margin: auto;
}
.style_tabela {
	margin: auto;
}
td {
	border: 1px solid;
	
}
tr {
	border: 1px solid;
}
td.verde:hover{
    	
    	background-color: green;
    	/*display: block;*/
    }
table.style_tabela {
	border-collapse: collapse;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
<!DOCTYPE html>
	
	<html lang = "pt-br">
		<head>
			
			<meta charset = "UTF-8"/>
			<title>Cabeçalho</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>
			
			<div class = "escopo">
				
				<div class = "margem_escopo">
					
					<div class = "tabela">
						
						<table class = "style_tabela" >
							<tr>
								
								<td class = "verde">Gomo</td>
								<td>Tesla</td>
								<td>Riuta</td>
								<td>Ferna</td>
								<td>Romã</td>
								<td>Célula</td>
								<td>Atacado</td>
							</tr>
							<tr>
								<td>Gomo</td>
								<td>Tesão</td>
								<td>Riuta</td>
								<td>Ferna</td>
								<td>Romã</td>
								<td>Célula</td>
								<td>Atacado</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</body>
	</html>

Or using flexbox in the div where the table with the property is justify-content: center:

* {
	font-family: arial;
}
body {
	padding: 0;
	margin: 0;
}
.escopo {
	width: 100%;
	height: 200px;
	background-color: yellow;
}
.margem_escopo {
	width: 1000px;
	height: 200px;
	margin: auto;
}
.tabela {
	border: 1px solid;
	width: 350px;
	height: 198px;
	background-color: red;
	margin: auto;
  display: flex;
  justify-content: center;
}
.style_tabela {
	margin: auto;
}
td {
	border: 1px solid;
	
}
tr {
	border: 1px solid;
}
td.verde:hover{
    	
    	background-color: green;
    	/*display: block;*/
    }
table.style_tabela {
	border-collapse: collapse;
}
<!DOCTYPE html>
	
	<html lang = "pt-br">
		<head>
			
			<meta charset = "UTF-8"/>
			<title>Cabeçalho</title>
			<link rel="stylesheet" type="text/css" href="style.css">
		</head>
		<body>
			
			<div class = "escopo">
				
				<div class = "margem_escopo">
					
					<div class = "tabela">
						
						<table class = "style_tabela" >
							<tr>
								
								<td class = "verde">Gomo</td>
								<td>Tesla</td>
								<td>Riuta</td>
								<td>Ferna</td>
								<td>Romã</td>
								<td>Célula</td>
								<td>Atacado</td>
							</tr>
							<tr>
								<td>Gomo</td>
								<td>Tesão</td>
								<td>Riuta</td>
								<td>Ferna</td>
								<td>Romã</td>
								<td>Célula</td>
								<td>Atacado</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
		</body>
	</html>

Browser other questions tagged html css div table

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