テーブルタグによって生成されるデフォルトのスペースを削除するにはどうすればよいですか？上記のコードで

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>

width:100%;を有し、各行はheight:10%;とheight:100%;を持って私は10行でテーブルを作成しようとしたことだし、最初の行の10 columns.theテーブルがあります。各行は10の部分に分割されます（幅はそれぞれ10％です）。しかし、10の列は最初の行に収まらず、デフォルトのスペースをタグで生成していますが、これをどのように修正できますか？

Answer 1

.colクラスに0を追加してみてください。

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

私はうまくいくと思います。これを参照してくださいcodepen