Question

我试图在我的桌子上添加一些保证金。填充和边界工作，但边际没有。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果你想增加保证金，你需要添加表cellspacing =“10” 这是我要测试的代码，试试这个代码......

  <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>

Answer 2

与单元格间距类似，在css中，您可以使用border-spacing和border-collapse: separate属性，应用于父table代码

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>

Answer 3

尝试定义每个边距边：

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

您必须定义边距的每一边。如果您需要有关边距的更多帮助，请参阅以下链接： https://www.w3schools.com/css/css_margin.asp

Answer 4

使用border-spacing在单元格之间留出空格，而不是使用边距。

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>

HTML边距不起作用

4 个答案: