HTML table 跨度元素 hiding/deleting 使用样式

Question

早上好，

我正在为 e-commerce 开发自动生成的 wordpress 网站产品页面。该页面是使用 table 中的 span 元素生成的，它在 table 中的 header 和按钮之间添加了额外的 space。每当用户 select 按钮之一时，他 select 的按钮名称将显示在此 space.

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

图 1. 原始设置，none selected

图 2. 原始设置，按钮 selected

            <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 元素从代码中删除或使其不可见，这样就不会在 table 的标签和其中的按钮之间造成这种难看的差距？

我正在尝试改变风格：

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

但是 none 有效。

Answer 1

尝试：

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

:)

编辑：请记住，该行中的所有列都必须具有 class 以确保高度为 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;
}

HTML table 跨度元素 hiding/deleting 使用样式

HTML table span element hiding/deleting using styles

html

css

wordpress

html-table