Question

这怎么可能有效：

 <TABLE>
 <TR>
    <TD  onclick="play('cell1')" id="cell1">-</TD>
    <TD onclick="play('cell2')" id="cell2">-</TD>
    <TD onclick="play('cell3')" id="cell3">-</TD>
 </TR>
 <TR>
    <TD onclick="play('cell4')" id="cell4">-</TD>
    <TD onclick="play('cell5')" id="cell5">-</TD>
    <TD onclick="play('cell6')" id="cell6">-</TD>
 </TR>
 <TR>
    <TD onclick="play('cell7')" id="cell7">-</TD>
    <TD onclick="play('cell8')" id="cell8">-</TD>
    <TD onclick="play('cell9')" id="cell9">-</td>
 </TR>

但如果我在“ - ”之间加上空格则不然。我知道HTML中的元素位置并不重要（我的意思是，在这种情况下）。为什么呢？

Answer 1

CSS解决方案：

如果我做对了，你想把-放在两个空格之间，所以你只需要使用padding: 0px 5px;和td元素来模拟这个，这是一个片段演示：

＆＃13;

table td {
   padding: 0px 5px;
 }

＆＃13;

<TABLE>
  <TR>
    <TD onclick="play('cell1')" id="cell1">-</TD>
    <TD onclick="play('cell2')" id="cell2">-</TD>
    <TD onclick="play('cell3')" id="cell3">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell4')" id="cell4">-</TD>
    <TD onclick="play('cell5')" id="cell5">-</TD>
    <TD onclick="play('cell6')" id="cell6">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell7')" id="cell7">-</TD>
    <TD onclick="play('cell8')" id="cell8">-</TD>
    <TD onclick="play('cell9')" id="cell9">-</td>
  </TR>
</TABLE>

＆＃13;

这会在-元素中显示" - "为td。

HTML解决方案：

如果您只想在没有HTML的情况下使用CSS，解决方案就是将cellpadding=5与table一起使用，这是一个有用的代码段：

＆＃13;

<TABLE CELLPADDING=10>
  <TR>
    <TD onclick="play('cell1')" id="cell1">-</TD>
    <TD onclick="play('cell2')" id="cell2">-</TD>
    <TD onclick="play('cell3')" id="cell3">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell4')" id="cell4">-</TD>
    <TD onclick="play('cell5')" id="cell5">-</TD>
    <TD onclick="play('cell6')" id="cell6">-</TD>
  </TR>
  <TR>
    <TD onclick="play('cell7')" id="cell7">-</TD>
    <TD onclick="play('cell8')" id="cell8">-</TD>
    <TD onclick="play('cell9')" id="cell9">-</td>
  </TR>
</TABLE>

＆＃13;

但这也会在tr元素之间留出空格，换句话说，它也会为padding-top元素生成padding-bottom和td。

<强>结论：

因此，使用padding中的CSS可以更好地满足您的要求，现在您可以选择正确的解决方案。

表格的td之间的HTML空间

1 个答案: