How to remove unwanted space in this table?

Question

I want to create a flow indicator bar in the form of:

Step 1 > Step 2 > Step 3

,I use table to do that, and the follow html did almost exactly I want:

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

but there is still some unwanted spaces in the table, how can I remove that? I tried:

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

which sets both margin and padding of table be 0px, but still have some unwanted spaces.

Why using table for this? If it's not a e-mail template, wouldn't it be better to use Flexbox instead? — Ilya Streltsyn, Jun 05 '18 at 08:22
Also, please don't use the trailing slash in non-empty HTML tags like `` and `
` — it doesn't "self-close" them and is just ignored (https://stackoverflow.com/a/3558200/2533215), and the layout doesn't break here only because ``s are auto-closed before the next opening `` tag. — Ilya Streltsyn, Jun 05 '18 at 08:22

Grokify · Answer 1 · 2018-06-05T08:09:01.080

You can get rid of the vertical white line separating .middle and .convex by adding margin-left:-1px to .convex as follows. This will move .convex one pixel to the left.

I also closed off the last step with the same width so you can see them together.

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

score 1 · Accepted Answer · answered Jun 05 '18 at 08:03

1

Add cellpadding="0" to your table element. Try this.

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

answered Jun 05 '18 at 08:03

Aryan Twanju

2,464
1
9
12

score 1 · Answer 3 · answered Jun 05 '18 at 08:03

Hi add to this in your table cellpadding="0" border="0" like this if you write any table than you also add to this

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”

Takit Isy · Answer 4 · 2018-06-05T09:10:22.587

You can achieve all of your effect using CSS with pseudo elements ::before and ::after and only one td per "step" in your HTML.

I also removed all the inline CSS!… It's better and easier to have all the CSS in one place.

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>

Hope it helps!

How to remove unwanted space in this table?

4 Answers4