使用样式隐藏/删除 HTML 表格跨度元素

Question

早上，

我正在为电子商务开发自动生成的 wordpress 网站产品页面。该页面是使用表格中的 span 元素生成的，它在表格中的标题和按钮之间添加了额外的空间。每当用户选择其中一个按钮时，他选择的按钮的名称就会显示在此空间中。

据我所知，无法从 wordpress 菜单的任何位置禁用此功能。这就是我试图在代码中禁用它的原因。

图 1. 原始设置，未选择

图 2. 原始设置，已选择按钮

            <tbody>
                <tr>
                    <td class="label"><label for="chest-size">Chest Size</label><span class="woo-selected-variation-item-name" data-default=""></span></td>
                    <td class="value woo-variation-items-wrapper"><select id="chest-size" class=" hide woo-variation-raw-select woo-variation-raw-type-button" style="display:none" name="attribute_chest-size" data-attribute_name="attribute_chest-size" data-show_option_none="yes"><option value="">Choose an option</option><option value="M(90-99cm)" class="attached enabled">M(90-99cm)</option><option value="L(100-110cm)" class="attached enabled">L(100-110cm)</option><option value="XL(110-120cm)" class="attached enabled">XL(110-120cm)</option></select><ul role="radiogroup" aria-label="Chest Size" class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_chest-size" data-attribute_values="[&quot;M(90-99cm)&quot;,&quot;L(100-110cm)&quot;,&quot;XL(110-120cm)&quot;]"><li aria-checked="false" data-wvstooltip="M(90-99cm)" class="variable-item button-variable-item button-variable-item-M(90-99cm)" title="M(90-99cm)" data-title="M(90-99cm)" data-value="M(90-99cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">M(90-99cm)</span></div></li><li aria-checked="false" data-wvstooltip="L(100-110cm)" class="variable-item button-variable-item button-variable-item-L(100-110cm)" title="L(100-110cm)" data-title="L(100-110cm)" data-value="L(100-110cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">L(100-110cm)</span></div></li><li aria-checked="false" data-wvstooltip="XL(110-120cm)" class="variable-item button-variable-item button-variable-item-XL(110-120cm)" title="XL(110-120cm)" data-title="XL(110-120cm)" data-value="XL(110-120cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">XL(110-120cm)</span></div></li></ul>                     </td>
                </tr>
                <tr>
                    <td class="label"><label for="height">Height</label><span class="woo-selected-variation-item-name" data-default=""></span></td>
                    <td class="value woo-variation-items-wrapper"><select id="height" class=" hide woo-variation-raw-select woo-variation-raw-type-button" style="display:none" name="attribute_height" data-attribute_name="attribute_height" data-show_option_none="yes"><option value="">Choose an option</option><option value="Regular(170-179cm)" class="attached enabled">Regular(170-179cm)</option><option value="Long(180-189cm)" class="attached enabled">Long(180-189cm)</option></select><ul role="radiogroup" aria-label="Height" class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_height" data-attribute_values="[&quot;Regular(170-179cm)&quot;,&quot;Long(180-189cm)&quot;]"><li aria-checked="false" data-wvstooltip="Regular(170-179cm)" class="variable-item button-variable-item button-variable-item-Regular(170-179cm)" title="Regular(170-179cm)" data-title="Regular(170-179cm)" data-value="Regular(170-179cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">Regular(170-179cm)</span></div></li><li aria-checked="false" data-wvstooltip="Long(180-189cm)" class="variable-item button-variable-item button-variable-item-Long(180-189cm)" title="Long(180-189cm)" data-title="Long(180-189cm)" data-value="Long(180-189cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">Long(180-189cm)</span></div></li></ul><a class="reset_variations" href="#" style="visibility: hidden;">Clear</a>                      </td>
                </tr>
        </tbody>

原始设置的代码

图3.span元素从代码中截取时的输出

            <tbody>
                <tr>
                    <td class="label"><label for="chest-size">Chest Size</label></td>
                    <td class="value woo-variation-items-wrapper"><select id="chest-size" class=" hide woo-variation-raw-select woo-variation-raw-type-button" style="display:none" name="attribute_chest-size" data-attribute_name="attribute_chest-size" data-show_option_none="yes"><option value="">Choose an option</option><option value="M(90-99cm)" class="attached enabled">M(90-99cm)</option><option value="L(100-110cm)" class="attached enabled">L(100-110cm)</option><option value="XL(110-120cm)" class="attached enabled">XL(110-120cm)</option></select><ul role="radiogroup" aria-label="Chest Size" class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_chest-size" data-attribute_values="[&quot;M(90-99cm)&quot;,&quot;L(100-110cm)&quot;,&quot;XL(110-120cm)&quot;]"><li aria-checked="false" data-wvstooltip="M(90-99cm)" class="variable-item button-variable-item button-variable-item-M(90-99cm)" title="M(90-99cm)" data-title="M(90-99cm)" data-value="M(90-99cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">M(90-99cm)</span></div></li><li aria-checked="false" data-wvstooltip="L(100-110cm)" class="variable-item button-variable-item button-variable-item-L(100-110cm)" title="L(100-110cm)" data-title="L(100-110cm)" data-value="L(100-110cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">L(100-110cm)</span></div></li><li aria-checked="false" data-wvstooltip="XL(110-120cm)" class="variable-item button-variable-item button-variable-item-XL(110-120cm)" title="XL(110-120cm)" data-title="XL(110-120cm)" data-value="XL(110-120cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">XL(110-120cm)</span></div></li></ul>                     </td>
                </tr>
                <tr>
                    <td class="label"><label for="height">Height</label></td>
                    <td class="value woo-variation-items-wrapper"><select id="height" class=" hide woo-variation-raw-select woo-variation-raw-type-button" style="display:none" name="attribute_height" data-attribute_name="attribute_height" data-show_option_none="yes"><option value="">Choose an option</option><option value="Regular(170-179cm)" class="attached enabled">Regular(170-179cm)</option><option value="Long(180-189cm)" class="attached enabled">Long(180-189cm)</option></select><ul role="radiogroup" aria-label="Height" class="variable-items-wrapper button-variable-wrapper" data-attribute_name="attribute_height" data-attribute_values="[&quot;Regular(170-179cm)&quot;,&quot;Long(180-189cm)&quot;]"><li aria-checked="false" data-wvstooltip="Regular(170-179cm)" class="variable-item button-variable-item button-variable-item-Regular(170-179cm)" title="Regular(170-179cm)" data-title="Regular(170-179cm)" data-value="Regular(170-179cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">Regular(170-179cm)</span></div></li><li aria-checked="false" data-wvstooltip="Long(180-189cm)" class="variable-item button-variable-item button-variable-item-Long(180-189cm)" title="Long(180-189cm)" data-title="Long(180-189cm)" data-value="Long(180-189cm)" role="radio" tabindex="0"><div class="variable-item-contents"><span class="variable-item-span variable-item-span-button">Long(180-189cm)</span></div></li></ul><a class="reset_variations" href="#" style="visibility: hidden;">Clear</a>                      </td>
                </tr>
        </tbody>

更改视图的代码，我希望它看起来如何。

有没有办法让这个 span 元素从代码中删除或使其不可见，所以它不会在表格标签和其中的按钮之间造成这种看起来很糟糕的差距？

我正在尝试改变风格：

.woo-selected-variation-item-name{
display:none;
height:0px;
}

但这些都不起作用。

Answer 1

试试：

font-size: 0;
padding: 0;
margin: 0;
height: 0;

:)

编辑：请记住，该行中的所有列都必须具有该类，以确保高度为 0

EDIT2：此解决方案确保您的元素高度为 0，但父元素 td.label 仍然“高”。我已将 display: flex; 添加到其中，现在它似乎正在工作：

另外，稍微对齐标签会很棒：

.woo-variation-swatches.wvs-show-label .variations td .woo-selected-variation-item-name, .woo-variation-swatches.wvs-show-label .variations td label {
  margin: 10px 0px;
}