通过设置的HTML列宽，如果隐藏，则不接受

Question

所以有一段时间我一直使用ad-td元素来设置html表中的列宽。但现在我正在IE 11中测试它，它似乎不起作用。它在铬或边缘也不起作用。在这个例子中，我隐藏了thead，因为它不需要通过显示：none。但是列宽无法识别。选项按钮应为2em宽，标签为23em宽，然后最后一列设置为自动。我还为它准备了一支钢笔。让我知道通过css设置表列宽的最佳方法。

<form id="frmRequest" name="frmRequest" method="post" action="pgRequest.aspx">
<div id="content">
<div id="contentMain">
<div class="request_form">
<div id="request_type">
<table class="request_type">
<caption>Reason For Conflicts Check</caption>
<thead>
<tr>
<td class="col1">Column 1</td>
<td class="col2">Column 2</td>
<td class="col3">Column 3</td>
</tr>
</thead>
<tbody>
<tr>
<td class="data col1"><input value="3" name="optIntakeType" type="radio" id="optIntakeTypeNewClientMatter" checked="checked" /></td>
<td class="label col2" colspan="2"><label for="optIntakeTypeNewClientMatter">Taking on a New Client &amp; Opening a Matter</label></td>                        
</tr>
<tr>
<td class="data col1"><input value="4" name="optIntakeType" type="radio" id="optIntakeTypeNewMatter" /></td>
<td class="label col2" colspan="2"><label for="optIntakeTypeNewMatter">Taking on a New Matter of an Existing Client</label></td>
</tr>
<tr>
<td class="data col1"><input value="1" name="optIntakeType" type="radio" id="optIntakeTypeExistingClient" /></td>
<td class="label col2"><label for="optIntakeTypeExistingClient">Add Related Parties to an Existing Client</label></td>
<td class="lookup col3">
<div id="existing_client">
<label for="txtExistingClient">Client</label>
<input name="txtExistingClient" type="text" id="txtExistingClient" size="15" maxlength="14" class="text uppercase" />
<button id="cmdExistingClientLookup" name="cmdExistingClientLookup" type="button" value="LOOKUP"><img src="../images/search16.gif" alt="SEARCH"></button>
<span id="lblExistingClient"></span>
</div>
</td> 
</tr>
<tr>
<td class="data col1"><input value="0" name="optIntakeType" type="radio" id="optIntakeTypeExistingMatter" /></td>
<td class="label col2"><label for="optIntakeTypeExistingMatter">Add Related Parties to an Existing Matter</label></td>
<td class="lookup col3">
<div id="existing_matter">
<label for="txtExistingMatter">Matter</label>
<input name="txtExistingMatter" type="text" id="txtExistingMatter" size="15" maxlength="15" class="text uppercase" />
<button id="cmdExistingMatterLookup" name="cmdExistingMatterLookup" type="button" value="LOOKUP"><img src="../images/search16.gif" alt="SEARCH"></button>
<span id="lblExistingMatter"></span>
</div>
</td>
</tr>
<tr>
<td class="data col1"><input value="5" name="optIntakeType" type="radio" id="optIntakeTypeFreeSearch" /></td>
<td class="label col2" colspan="2"><label for="optIntakeTypeFreeSearch">Conflict Check For Research Only</label></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</form>

input.uppercase
{
text-transform: uppercase;
}
input.error
{
border: 1px solid #FF0000;
}
.error
{
color: #FF0000;
}
div.request_form
{
text-align: left;
width: 97%;
border: 2px outset #CCAACC;
padding: 1em 1em 1em 1em;
font-weight: normal;
font-size: 10pt;
}
table caption
{
color: #000000;
font-size: 11pt;
font-weight: bold;
text-align: left;
padding-bottom: 0.5em;
}
#request_type
{
margin: 0.5em 0em 0em 0em;
padding: 0;
width: 100%;
border: 0px solid #00FF00;
}
table.request_type
{
margin: 0em 0em 0em 0em;
width: 100%;
border-spacing: 0px;
border-collapse: collapse;
table-layout: fixed;
clear: none;
}
table.request_type, table.request_type tr, table.request_type td
{
border: 1px inset #AAAAAA;
}
table.request_type
{
border: 0px inset #AAAAAA;
}
table.request_type tr
{
height: 1.5em;
}
table.request_type td
{
font-weight: normal;
font-size: 10pt;
padding: 0em 0em 0em 0em;
}
table.request_type tbody td.label
{
font-size: 11pt;
font-weight: normal;
color: #0000CC;
width: 10em;
padding-left: 0em;
text-align: left;
vertical-align: top;
}
table.request_type tbody td.data
{
color: #000000;
text-align: left;
vertical-align: top;
font-family: courier, monospace;
font-size: 10pt;
font-weight: normal;
}
table.request_type tbody td.lookup
{
text-align: left;
}
table.request_type tbody td.lookup input
{
vertical-align: middle;
}
table.request_type tbody td.lookup button
{
vertical-align: middle;
width: 32px;
}
table.request_type thead
{
display: none;
}
table.request_type td.col1
{
width: 2em;
}
table.request_type td.col2
{
width: 23em;
}
table.request_type td.col3
{
width: auto;
}
#existing_client
{
border: 0px solid #FF0000;
visibility: hidden;
}
#existing_matter
{
border: 0px solid #FF0000;
visibility: hidden;
}

https://codepen.io/Will_Rickards/pen/dyYpqKb

Answer 1

table-layout: fixed;表示表的布局由显示的第一行设置。使用table-layout: auto或设置thead { visibility: collapsed; }。但目前并不是所有浏览器都支持collapsed。

另外，提示：您不需要像.col1、.col2这样的类，而是使用nth-child选择器：

table.request_type {
/* etc */
table-layout: auto;
}
table.request_type > thead > tr > th:nth-child(1),
table.request_type > tbody > tr > td:nth-child(1) {
width: 2em;
}
table.request_type > thead > tr > th:nth-child(2),
table.request_type > tbody > tr > td:nth-child(2) {
width: 23em;
}
table.request_type > thead > tr > th:nth-child(3),
table.request_type > tbody > tr > td:nth-child(3) {
/* `width: auto;` is implicit, you don't need to set it explicitly. */
}