使用表格的整个宽度在一行下获取标签

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 dev工具选项将选择器复制到检查器上，我可以获得适用于您的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/

希望这会有所帮助

Answer 2

您将ID <tbody> <tr class="rowRequired"> <div id="optionsID0EYE" style="display: flex; flex-wrap: wrap"> <div style="width: 50%"> <input id="ID0EYE" name="Patient-MainGP" value="true" type="radio"><span> Yes</span> </div> <div style="width: 50%"> <input style="margin-left:20px; " id="ID0EYE" name="Patient-MainGP" value="false" type="radio"><span> No</span> </div> </div> </tr> </tbody> 放在错误的位置。 jqxValidator将为具有此ID的元素创建同级。您需要执行以下操作：

optionsID0EYE

我将ID div移到了我制作的新STATIC_URL = '/static/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') MEDIA_URL = '/media/' 上。

工作示例：https://codepen.io/anon/pen/YvLZeB?editors=1000