Question

＆＃13;

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;
}

＆＃13;

<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;

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

Answer 1

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

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

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

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

1 个答案: