dream hunter dream hunter - 13 days ago 6
CSS Question

How to remove default space from <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{
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?

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

Answer

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