css - 获取一行下的标签使用表格的全宽

Question

我正在使用 jqxValidator 来验证一组单选按钮。当行下方出现红色信息(即标签)时，它继承了第一列的宽度，打破了设计:

我尝试了很多东西，最后更改标签的显示修复了表格布局，但消息被分成两行。

有没有办法扩展标签的宽度以使用整个表格的宽度？

示例:https://codepen.io/lhernand/pen/OEZbXb

HTML:

<table style="border:0; border-collapse:collapse; " width="100%">
    <tbody>
        <tr class="rowRequired jqx-validator-error-element" id="optionsID0EYE">
            <td style="border:0; width:50%; "><input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span></td>
            <td style="border:0; width:50%; "><input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span></td>
        </tr><label class="jqx-validator-error-label" style="position: relative; left: 0px; width: 304.688px; top: 2px;">Please choose one option!</label>
    </tbody>
</table>

注意:它应该在 IE11 中工作

Answer 1

使用这种固定结构需要一些市长黑客，由于 jquery 验证器在表中的 td 之后插入了一个标签，因此该元素的行为类似于 td，但在同一行上没有匹配项。

使用 chrome 开发工具选项复制检查器上的选择器，我可以获得最适合你的 html 结构的选择器，因此将 200% 的大小应用到这个元素上，让表格不会出现错误行为

#tablePatientDetailsContainer > tbody > tr:nth-child(1) > td > table > tbody > tr > td:nth-child(2) > table > tbody > label{
  width: 200% !important;
  box-sizing: border-box;
}

在 Chrome、FF 和 Safari 上测试

我的工作代码 https://codepen.io/Teobis/full/vrjZVR/

希望对你有帮助