HTML DOM 样式 borderSpacing 属性

htmlweb developmentfront end technology更新于 2024/3/10 18:20:17

HTML DOM borderSpacing 属性用于设置或返回表格单元格之间的间距。

以下是语法 −

设置 borderSpacing 属性 −

object.style.borderSpacing = "length length|initial|inherit"

以上属性的解释如下 −

值	描述
length length	用于指定单元格之间的间距。如果只指定一个值，则该值将同时设置为水平和垂直间距，否则第一个值用于水平间距，第二个值用于垂直间距。其默认值为 0。
Initial	用于将此属性设置为初始值。
Inherit	用于继承父属性值

我们来看一个 borderSpacing 属性的示例 −

示例

<!DOCTYPE html>
<html>
<head>
<style>
   div {
      display: flex;
      float: left;
   }
   table {
      border: 3px solid black;
   }
   td {
      border: 3px solid lightgreen;
   }
   th {
      border: 3px solid lightblue;
   }
</style>
<script>
   function IncreaseBorderSpacing(){
      document.getElementById("t1").style.borderSpacing="10px 10px";
      document.getElementById("Sample").innerHTML="The table border spacing is now increased ";
   }
</script>
</head>
<body>
   <table id="t1">
      <tr>
         <th>FRUITS</th>
         <th>PRICE </th>
      </tr>
      <tr>
         <td>MANGO </td>
         <td>40</td>
      </tr>
      <tr>
         <td>APPLE</td>
         <td>50</td>
      </tr>
   </table>
<p>Increase the above table border spacing by clicking the below button</p>
<button onclick="IncreaseBorderSpacing()">Increase Border Spacing</button>
<p id="Sample"></p>
</body>
</html>