CODEWITHSUNDEEP
htmlcssmargin
Omer
Omer

Reputation: 163

HTML margin isn't working

I'm trying to add some margin to my table. Padding and border work but margin doesn't.

th {
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
}
<table id="Expon">
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

Upvotes: 2

Views: 344

Answers (4)

bhansa
bhansa

Reputation: 7534

Use border-spacing to space between your cells, instead of using margin.

th{
  border: 1px solid black;
  padding: 10px;
}

table{
  border-spacing: 10px;
}
<table id="Expon">
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

Upvotes: 0

Pratik Sanyaja
Pratik Sanyaja

Reputation: 131

if you want to add margin you need to add table cellspacing="10" here is my code to test , try this code....

  <html>
<head>

<style>
     th {
      border: 1px solid black;        
      padding: 10px;
    }
</style>
</head>
<body>
<table id="Expon" cellspacing="10">
  <tr>
    <th>gfhd</th>
    <th>dfgh</th>
    <th>gfh</th>
  </tr>
  <tr>
    <th>gfh</th>
    <th>fgh</th>
    <th>gfh</th>
  </tr>
  <tr>
    <th>fgdh</th>
    <th>gfh</th>
    <th>fgh</th>
  </tr>
</table>
</body>
</html>

Upvotes: 1

A Israfil
A Israfil

Reputation: 519

Try to define each margin side:

margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;

You have to define each side of the margin. If you need more help with margins, refer to this link: https://www.w3schools.com/css/css_margin.asp

Upvotes: 0

Sergey Sklyar
Sergey Sklyar

Reputation: 1970

Similar to cell-spacing, in css you can use border-spacing along with border-collapse: separate properties, applied to the parent table tag

table {
  border-spacing: 10px;
  border-collapse: separate;
}
th {
  border: 1px solid black;
  margin: 10px;
  padding: 10px;
}
<table id="Expon">
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</table>

Upvotes: 0

Related Questions