如何从

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>

On the above code I tried to create a 10 x 10 table.but which generating an extra padding (the orange color part).How can I remove this extra padding?.What is it source?

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

(I'm tried to put padding:0 for table,tr tags but which didn't help me)

（我试图填充填充：0表格，tr标签，但没有帮助我）

1 个解决方案

#1

Use border-spacing: 0 on the 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>

#1

Use border-spacing: 0 on the 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>

1 个解决方案

#1

#1

相关文章