Question

我想以以下形式创建流量指示条：

Step 1 > Step 2 > Step 3

，我使用表来做到这一点，并且跟随html几乎完全是我想要的：

＆＃13;

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

＆＃13;

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

＆＃13;

但表格中仍有一些不需要的空格，我该如何删除？我试过了：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

您可以通过将.middle添加到.convex来消除分隔margin-left:-1px和.convex的垂直白线，如下所示。这会将.convex向左移动一个像素。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将cellpadding="0"添加到您的表格元素中。试试这个。

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

Answer 3

如果您编写任何表格而不是添加到此表格，请在表格cellpadding="0" border="0"中添加此内容

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 4

您可以使用带有伪元素::before和::after的CSS以及HTML中每个“步骤”只有一个td来实现所有效果。

我还删除了所有内联CSS！...将所有CSS放在一个地方更好更容易。

table {
  width: 100%;
  font-size: 30px;
}

.step {
  position: relative;
  height: 2em;
  padding: 0 0 0 1.25em;
  background-color: orange;
}

.step:last-of-type {
  width: 50%;
}

.step::before,
.step::after {
  position: absolute;
  top: 0;
  content: '';
  border: 1em solid transparent;
  border-right: 0;
}

.step::before {
  left: 0;
  border-left-color: white;
}

.step:not(:last-of-type)::after {
  right: 0;
  border-top-color: white;
  border-bottom-color: white;
}

<table>
  <tr>
    <td class="step">Step 1</td>
    <td class="step">Step 2</td>
    <td class="step">Step 3</td>
  </tr>
</table>

希望它有所帮助！

如何删除此表中不需要的空间？

4 个答案: