html - 如何消除表标签生成的默认空间？

Question

html,body{
  width:100%;
  height:100%;}
tr{
  width:100%;
  height: 10%;
  float: left;
}
.col{
  width: 10%;
  height: 100%;
  float: left;
}
.odd{
  background-color: green;
}
.even{
  background-color: #fff;
}
#rw-one,#rw-three,#rw-five,#rw-seven,#rw-nine{
  /*width: 100%;
  height: 100%;*/
  z-index: 999;
  background-color: red;
}
table{
  width:100%;
  height: 100%;
  background-color: orange;
  border:none;
}

<table>
  <tr id="rw-one">
    <td class="odd col"> </td>
    <td class="even col"> </td>
    <td class="odd col"> </td>
    <td class="even col"> </td>
    <td class="odd col"> </td>
    <td class="even col"> </td>
    <td class="odd col"> </td>
    <td class="even col"> </td>
    <td class="odd col"> </td>
    <td class="even col"> </td>
  </tr>
  <tr id="rw-two"></tr>
  <tr id="rw-three"></tr>
  <tr id="rw-four"></tr>
  <tr id="rw-five"></tr>
  <tr id="rw-six"></tr>
  <tr id="rw-seven"></tr>
  <tr id="rw-eight"></tr>
  <tr id="rw-nine"></tr>
  <tr id="rw-ten"></tr>
</table>

在上面的代码中，我尝试创建一个有 10 行的表格，第一行有 10 列。表格有一个 width:100%; 并且每一行都有一个 height:10%; 和 height:100%;。每一行又被分成 10 个部分(每个宽度:10%)。但是 10 列没有第一行放不下。可能会通过 or 标记生成一些默认空间，我该如何解决这个问题？

Answer 1

尝试将 padding:0 添加到您的 .col 类中。

.col{
 padding:0;
 width: 10%;
 height: 100%;
 float: left;
}

我认为这应该可行。看这个codepen