HTML ширина столбцов, установленных через thead, не учитывается, если thead скрыт

Question

Итак, какое-то время я использовал элементы thead td для установки ширины столбцов в html таблицах. Но сейчас я проверяю это в IE 11, и это, похоже, не работает. Это не работает в chrome или ребре либо. В этом примере я скрываю thead, поскольку он не нужен через display: none. Но тогда ширина столбца не распознается. Кнопки выбора должны иметь ширину 2em и метки шириной 23em, а затем для последнего столбца устанавливается значение auto. Я также включил копен для этого. Сообщите мне, как лучше всего sh установить ширину столбцов таблицы с помощью 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. */
}