How to apply styles to all columns?

Question

How to apply styles to all columns?

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

If I have:

#principales td{

margin: 20px;

}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table>
     <table align="center">
    <td><b>Simbolos matemáticos</b></td>
  </table>
  <tr id="principales"> 
    <td>Simbolo</td>
    <td>Nombre</td>
    <td>Significado</td>
  </tr>
  
  </table>
</body>
</html>

In the CSS code, I programmed:

#principales td{
margin:20px;
}

Why the margin is not applied to all <td> ?

css

asked by Eduardo Sebastian 07.09.2017 в 18:55

source

2 answers

0

#principales div{
    margin: 20px;
    background-color: #ccc;
    display: inline-block;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div>
    <div align="center" colspan="3"><b>Simbolos matemáticos</b></div>
    <div id="principales"> 
        <div>Simbolo</div>
        <div>Nombre</div>
        <div>Significado</div>
    </div>
</div>
</body>
</html>

I correct, do not use tables as they can give those problems, if you want to keep the table try using padding instead of margin

answered by 07.09.2017 в 19:15

Are the changes made to a temporary table reflected in their original tables? Modal only opens with the first button

score 2 · Accepted Answer

You are not creating the table with the correct structure, you are adding a table within another table without using tr or td , then the browser interpreting that creates a different table than you expect without the id="principales" .

Also, if you want to add a header to the table, it is best to use th .

The following code solves your problem:

#principales td{
    padding: 20px;
    background-color: #ccc;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<table border="1">
    <tr>
        <th colspan="3">Simbolos matemáticos</th>
    </tr>
    <tr id="principales"> 
        <td>Simbolo</td>
        <td>Nombre</td>
        <td>Significado</td>
    </tr>
</table>
</body>
</html>