使用表格的整个宽度获取行下的标签
使用表格的整个宽度获取行下的标签
提问于 2018-06-22 07:15:35
我正在使用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中工作
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-22 11:52:09
由于jquery验证器会在表中的td之后插入一个标签，因此该元素的行为就像td一样，在同一行上没有匹配项。
使用chrome dev tools选项复制检查器上的选择器，我可以为您拥有的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/
希望这能有所帮助
Stack Overflow用户
发布于 2018-06-22 08:00:53
您将id optionsID0EYE放在了错误的位置。jqxValidator将为具有此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>我将id optionsID0EYE移到了自己制作的新div中。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50978646
复制相关文章
相似问题