dream hunter dream hunter - 14 days ago 6
CSS Question

How can I eliminate default space generated by a table tag?



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>





In the above code I'm tried to create a table with 10 rows and on the first row there is 10 columns.the table have a
width:100%;
and each row have a
height:10%;
and
height:100%;
.and each row is again divided in to 10 parts (width:10% each).but the 10 columns are didn't fit on the first row .probably generating some default space by or tag,how can I fix this?

Answer

Try adding padding:0 to your .col class.

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

I think that should work. see this codepen