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

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 columns.the表具有width:100%;并且每行具有height:10%;和height:100%;。并且每行又被分成10份（宽度：每个10％），但10列不适合第一行。可能通过或标记生成一些默认空间，我该如何解决这个问题？

Answer 1

尝试添加填充：0到您的.col类。

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

我认为应该有效。看到这个codepen