如何去除这张桌子上不需要的空间？

Question

我要创建一个流量指示条，其形式为：

Step 1 > Step 2 > Step 3

，我使用表来完成这个操作，下面的html几乎完全是我想要的：

​

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" style="font-size:30px;">
  <tr>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 2</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
    <td class="middle" style="width:50%;">Step 3</td>
  </tr>
</table>

​

但是桌子上还有一些不需要的空间，我怎么才能把它去掉呢？我试过：

​

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" style="font-size:30px;margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;">
  <tr>
    <td class="concave"/>
    <td class="middle">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
  </tr>
</table>

​

它将表的边距和填充设置为0px，但仍然有一些不需要的空格。

Answer 1

将cellpadding="0"添加到表元素中。尝尝这个。

<table cellspacing="0" cellpadding="0" style="font-size:30px;">

Answer 2

通过将.middle和.convex添加到.convex中，可以去掉垂直白线，如下所示。这将使.convex向左移动一个像素。

我还以相同的宽度关闭了最后一步，这样您就可以看到它们在一起了。

​

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
  margin-left:-1px;
}

<table cellspacing="0" style="font-size:30px;">
  <tr>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 2</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 3</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
  </tr>
</table>

​

Answer 3

嗨，在您的表中添加这样的cellpadding="0" border="0"，如果您编写的表比添加到这个表中的表还要多

cellpadding="0" border="0" cellspacing="0"

​

.concave{
  border-left:1em solid transparent;
  border-top:1em solid orange;
  border-bottom:1em solid orange;
}

.middle{
  background-color:orange;
}

.convex{
  border-left:1em solid orange;
  border-top:1em solid transparent;
  border-bottom:1em solid transparent;
}

<table cellspacing="0" cellpadding="0" border="0" style="font-size:30px;">
  <tr>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 1</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
    <td class="middle" style="width:25%;">Step 2</td>
    <td style="max-width:0.5em;"><div class="convex"/></td>
    <td class="concave"/>
    <td class="middle" style="width:50%;">Step 3</td>
  </tr>
</table>

​

Is it necessary to add cellspacing=“0” cellpadding=“0”