如何从 <table> 中删除默认值 space？

Question

html,body{
  width:100%;
  height:100%;
  }
tr{
    width:100%;
    height: 10%;
    float: left;
    padding: 0 ! important;
}
.col{
    padding: 0 ! important;
    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:1px solid #000;
}

  <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">
                                <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>
                                <td class="odd col"> </td>
                            </tr>
                            <tr id="rw-three">
                                <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-four">
                                <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>
                                <td class="odd col"> </td>
                            </tr>
                            <tr id="rw-five">
                                <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-six">
                                <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>
                                <td class="odd col"> </td>
                            </tr>
                            <tr id="rw-seven">
                                <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-eight">
                                <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>
                                <td class="odd col"> </td>
                            </tr>
                            <tr id="rw-nine">
                                <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-ten">
                                <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>
                                <td class="odd col"> </td>
                            </tr>
                        </table>

在上面的代码中，我尝试创建一个 10 x 10 table.but，它会生成一个额外的填充（橙色部分）。我怎样才能删除这个额外的填充？它的来源是什么？

（我尝试将 padding:0 用于 table,tr 标签，但这对我没有帮助）

Answer 1

在 table

上使用 border-spacing: 0

html,body{
  width:100%;
  height:100%;
  }
tr{
    width:100%;
    height: 10%;
    float: left;
    padding: 0 ! important;
}
.col{
    padding: 0 ! important;
    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{
    border-spacing: 0;
    width:100%;
    height: 100%;
    background-color: orange;
  border:1px solid #000;
}

<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">
    <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>
    <td class="odd col"> </td>
  </tr>
  <tr id="rw-three">
    <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-four">
    <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>
    <td class="odd col"> </td>
  </tr>
  <tr id="rw-five">
    <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-six">
    <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>
    <td class="odd col"> </td>
  </tr>
  <tr id="rw-seven">
    <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-eight">
    <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>
    <td class="odd col"> </td>
  </tr>
  <tr id="rw-nine">
    <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-ten">
    <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>
    <td class="odd col"> </td>
  </tr>
</table>

如何从 <table> 中删除默认值 space？

How to remove default space from <table>?

html

css

space

html-table