我正在使用 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 中工作
最佳答案
使用这种固定结构需要一些市长黑客, 由于 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/
希望对你有帮助
关于css - 获取一行下的标签使用表格的全宽,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50978646/