如何消除表标记生成的默认空间?

时间:2016-11-24 16:11:43

标签: html css html-table



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>
&#13;
&#13;
&#13;

在上面的代码中,我试图创建一个包含10行的表,在第一行有10列。该表有width:100%;,每行都有一个height:10%;height:100%;。并且每行再次分为10个部分(宽度:每个10%)。但是10列不适合第一行。可能会生成一些默认空间或标记,如何我能解决这个问题吗?

1 个答案:

答案 0 :(得分:1)

尝试在.col类中添加填充:0。

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

我认为这应该有效。请参阅此codepen