如何刪除此表中不需要的空間？

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

您可以通過添加margin-left:-1px到.convex來.convex分隔.middle和.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 2

將cellpadding="0"添加到表元素中。 嘗試這個。

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

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> 

是否有必要添加cellspacing =“0”cellpadding =“0”

Answer 4

您可以使用帶有偽元素::before和::after CSS以及HTML中每個“step”只有一個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> 

希望能幫助到你！