我正在更新网页中的表格,并尝试缩小一列的宽度并增加另一列的宽度,但是没有运气。
我尝试在所有<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>