如何删除默认空间？

时间：2016-11-24 16:40:25

标签： html css html-table space

＆＃13;
＆＃13; 
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;
}
＆＃13; 
  <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>
＆＃13;
＆＃13;

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

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

1 个答案:

答案 0 :(得分：2)

在border-spacing: 0

上使用table 

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>

相关问题
最新问题