表TD宽度未更新

时间:2019-01-10 15:20:38

标签: html-table

我正在更新网页中的表格,并尝试缩小一列的宽度并增加另一列的宽度,但是没有运气。

我尝试在所有<TD>标签以及<TH>标签内使用多个列宽,并尝试使用<COLGROUP>标签来强制列作出反应。我可以更改其他属性(字体大小,字体类型,背景颜色等),但无法获取要更新的宽度。

<table  >

 <colgroup>
   <col>
   <col style="width:12px;">
 </colgroup>
<th style="padding: 10px;width: 80px;font-size: 15.5px;">
    Product
</th>
<th style="padding: 10px;width: 12px;font-size: 15.5px;">
    Original <br>Goal
</th>
<th style="padding: 10px;width: 80px;font-size: 15.5px;">
    Revised Goal
</th>
<th style="padding: 10px;width: 80px;font-size: 15.5px;">
    Monthly Goal
</th>
<th style="padding: 10px;width: 80px;font-size: 15.5px;">
    Monthly <br>YTD Goal
</th>
<th style="padding: 10px;width: 80px;font-size: 15.5px;">
    Current Result
</th>
<th style="padding: 10px;width: 80px;font-size: 15.5px;">
    As Of Date
</th>
<th style="padding: 10px;width: 900px;font-size: 15.5px;">
    Comments
</th>


<script language="javascript">
            function checkInput(ob) {
              var invalidChars = /[^0-9]/gi
              if(invalidChars.test(ob.value)) {
                        ob.value = ob.value.replace(invalidChars,"");
                  }
            }
</script>

<cfoutput query="fetch_interface">


    <tr>
        <td style="font-size: 15.5px;vertical-align:middle;padding-right:40px;border: 1px solid;width:800px;" valign="top">
            <b>#survey_question_interface#</b>
        </td>
        <td align="center" style="border: 1px solid;font-size: 15.5px;">#numberFormat(original_goal,',')#</td>
        <td align="center" style="border: 1px solid;font-size: 15.5px;">    
            <textarea name="#survey_qb_id#goal" class="count750" id="#survey_qb_id#goal" align="middle" rows="1" cols="8" maxlength="15" style="color:black;text-align:center;font-size:15.5px;overflow:hidden;width:80px;font-family:"Century Gothic";" onkeyup="checkInput(this)" onFocus="if (this.value == 'Comments'||this.value == '0') this.value = '';">#numberFormat(updated_goal,',')#</textarea>
        </td>
        <td align="center" style="border: 1px solid;font-size: 15.5px;">#numberFormat(mtd_goal,',')#</td>
        <td align="center" style="border: 1px solid;font-size: 15.5px;">#numberFormat(ytd_goal,',')#</td>
        <td align="center" style="border: 1px solid;font-size: 15.5px;">    
            <textarea name="#survey_qb_id#Result" class="count750" id="#survey_qb_id#Result" rows="1" cols="8" maxlength="15" style="color:black;text-align:center;font-size:15px;overflow:hidden;width:80px;font-family:"Century Gothic";" onkeyup="checkInput(this)"  onFocus="if (this.value == 'Comments'||this.value == '0') this.value = '';">#numberFormat(current_production,',')#</textarea>
        </td>
        <td align="center" style="border: 1px solid;">
            <input type="datefield" name="#survey_qb_id#survey_date" id="#survey_qb_id#survey_date" class="datepicker" style="height:17px;width:80px;font-size:15.5px;"value="#Dateformat(metric_date,'mm/dd/yyyy')#"> 
        </td>
        <td align="center" valign="center"style="padding-top: 10px;"> <CFIF #survey_question_cmt# eq 'Y'><textarea name="#survey_qb_id#Cmts" class="count750" id="#survey_qb_id#Cmts" rows="2" cols="70" maxlength="750" style="color:black;text-align:left;font-size:15.5px;padding:20px;width: 870px;font-family:"Century Gothic";" onFocus="if (this.value == 'Comments') this.value = '';">Comments</textarea></cfif><div id="#survey_qb_id#Cmtscounter" style="font-size:15.5px;">750 characters left</div></td>

    </tr>

    <cfset grpDescr = #grp_descr#> 
      </cfoutput>

    <cfoutput>
    <tr>
            <td style="font-size:15.5px;vertical-align:middle;padding-right:40px;border:1px solid;" valign="top">
                <b>Original Goal Entered</b>
            </td>
            <td style="font-size: 15.5px;vertical-align:middle;padding-right:40px;border: 1px solid;" valign="top">
            #dateformat(date_entered,'mm/dd/yyyy')#
            </td>
    </tr>
    </cfoutput>
      </table>

0 个答案:

没有答案