html - 具有固定宽度的 HTML tableheadercell 没有相应地表现
问题描述
我在下表的“站点 ID”tableheadercell 中设置了 180px 的宽度,但它的行为并不相应。知道为什么以及如何解决它吗?(您可以运行代码段以了解我的意思)
<table id="MainContent_tbEdit" class="tbEdit-table" style="width:100%;border:1px solid #868583;text-align:center;padding:8px;">
<tr id="MainContent_th_Row" style="background-color:#5D7B9D;text-align:center;vertical-align:center;color:white;border:1px solid #868583;">
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Scope</th><th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;width:180px;">Site ID</th><th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Site Name</th><th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Address</th><th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">CAP/ZIP</th><th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">City</th><th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Country</th>
</tr><tr id="MainContent_trz1" style="background-color:#F7F6F2;">
<td style="text-align:center;padding:8px;border:1px solid #868583;"><select name="ctl00$MainContent$ddlScope1-0" id="MainContent_ddlScope1-0">
<option selected="selected" value="1">EMEA</option>
<option value="2">APAC</option>
<option value="3">AMER</option>
</select></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><span id="MainContent_lblSid1-1">BA002</span></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxSname1-2" type="text" value="pippo pluto " id="MainContent_tbxSname1-2" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxAddress1-3" type="text" value="kjhjkfs" id="MainContent_tbxAddress1-3" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCap1-4" type="text" value="67367346 " id="MainContent_tbxCap1-4" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCity1-5" type="text" value="Checco" id="MainContent_tbxCity1-5" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><select name="ctl00$MainContent$ddlCountry1-6" id="MainContent_ddlCountry1-6">
</select></td>
</tr><tr id="MainContent_trz2">
<td style="text-align:center;padding:8px;border:1px solid #868583;"><select name="ctl00$MainContent$ddlScope2-0" id="MainContent_ddlScope2-0">
<option value="1">EMEA</option>
<option value="2">APAC</option>
<option selected="selected" value="3">AMER</option>
</select></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><span id="MainContent_lblSid2-1">BV001</span></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxSname2-2" type="text" value="ipoipoi " id="MainContent_tbxSname2-2" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxAddress2-3" type="text" value="asdjnjn" id="MainContent_tbxAddress2-3" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCap2-4" type="text" value="12398 " id="MainContent_tbxCap2-4" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCity2-5" type="text" value="Zorro" id="MainContent_tbxCity2-5" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><select name="ctl00$MainContent$ddlCountry2-6" id="MainContent_ddlCountry2-6">
</select></td>
</tr><tr id="MainContent_trz3" style="background-color:#F7F6F2;">
<td style="text-align:center;padding:8px;border:1px solid #868583;"><select name="ctl00$MainContent$ddlScope3-0" id="MainContent_ddlScope3-0">
<option value="1">EMEA</option>
<option selected="selected" value="2">APAC</option>
<option value="3">AMER</option>
</select></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><span id="MainContent_lblSid3-1">CK001</span></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxSname3-2" type="text" value="alkdjkj " id="MainContent_tbxSname3-2" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxAddress3-3" type="text" value="jchalsjij" id="MainContent_tbxAddress3-3" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCap3-4" type="text" value="1293898 " id="MainContent_tbxCap3-4" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCity3-5" type="text" value="Ripotto" id="MainContent_tbxCity3-5" /></td><td style="text-align:center;padding:8px;border:1px solid #868583;"><select name="ctl00$MainContent$ddlCountry3-6" id="MainContent_ddlCountry3-6">
</select></td>
</tr>
</table>
非常感谢。卢卡
解决方案
只需添加table
样式table-layout: fixed;
<table id="MainContent_tbEdit" class="tbEdit-table" style="width:100%;border:1px solid #868583;text-align:center;padding:8px;table-layout: fixed; ">
<tr id="MainContent_th_Row" style="background-color:#5D7B9D;text-align:center;vertical-align:center;color:white;border:1px solid #868583;">
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Scope</th>
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;width:180px;">Site ID</th>
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Site Name</th>
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Address</th>
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">CAP/ZIP</th>
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">City</th>
<th scope="column" style="text-align:center;padding:8px;border:1px solid #868583;">Country</th>
</tr>
<tr id="MainContent_trz1" style="background-color:#F7F6F2;">
<td style="text-align:center;padding:8px;border:1px solid #868583;">
<select name="ctl00$MainContent$ddlScope1-0" id="MainContent_ddlScope1-0">
<option selected="selected" value="1">EMEA</option>
<option value="2">APAC</option>
<option value="3">AMER</option>
</select>
</td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><span id="MainContent_lblSid1-1">BA002</span></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxSname1-2" type="text" value="pippo pluto "
id="MainContent_tbxSname1-2" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxAddress1-3" type="text" value="kjhjkfs" id="MainContent_tbxAddress1-3" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCap1-4" type="text" value="67367346 " id="MainContent_tbxCap1-4" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCity1-5" type="text" value="Checco" id="MainContent_tbxCity1-5" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;">
<select name="ctl00$MainContent$ddlCountry1-6" id="MainContent_ddlCountry1-6">
</select>
</td>
</tr>
<tr id="MainContent_trz2">
<td style="text-align:center;padding:8px;border:1px solid #868583;">
<select name="ctl00$MainContent$ddlScope2-0" id="MainContent_ddlScope2-0">
<option value="1">EMEA</option>
<option value="2">APAC</option>
<option selected="selected" value="3">AMER</option>
</select>
</td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><span id="MainContent_lblSid2-1">BV001</span></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxSname2-2" type="text" value="ipoipoi "
id="MainContent_tbxSname2-2" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxAddress2-3" type="text" value="asdjnjn" id="MainContent_tbxAddress2-3" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCap2-4" type="text" value="12398 " id="MainContent_tbxCap2-4" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCity2-5" type="text" value="Zorro" id="MainContent_tbxCity2-5" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;">
<select name="ctl00$MainContent$ddlCountry2-6" id="MainContent_ddlCountry2-6">
</select>
</td>
</tr>
<tr id="MainContent_trz3" style="background-color:#F7F6F2;">
<td style="text-align:center;padding:8px;border:1px solid #868583;">
<select name="ctl00$MainContent$ddlScope3-0" id="MainContent_ddlScope3-0">
<option value="1">EMEA</option>
<option selected="selected" value="2">APAC</option>
<option value="3">AMER</option>
</select>
</td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><span id="MainContent_lblSid3-1">CK001</span></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxSname3-2" type="text" value="alkdjkj "
id="MainContent_tbxSname3-2" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxAddress3-3" type="text" value="jchalsjij" id="MainContent_tbxAddress3-3" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCap3-4" type="text" value="1293898 " id="MainContent_tbxCap3-4" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;"><input name="ctl00$MainContent$tbxCity3-5" type="text" value="Ripotto" id="MainContent_tbxCity3-5" /></td>
<td style="text-align:center;padding:8px;border:1px solid #868583;">
<select name="ctl00$MainContent$ddlCountry3-6" id="MainContent_ddlCountry3-6">
</select>
</td>
</tr>
</table>
推荐阅读
- android - 如何在导航抽屉片段中制作标签片段?
- mysql - mysql - 朋友的朋友
- php - 根据 php 中 if 条件的输出检查单选按钮
- c++ - 在 cpack 输出中包含外部库
- android - 我如何从非 mainActivity 类到其他非 mainActivity 类?
- arrays - 如何使用 AWK 在循环中正确打印关联数组?
- python - 如何使用 urllib 发送 cookie
- r - Rserve 子进程内存问题
- angular - Angular 2,直接访问 www.example.com/otherURL 时如何重定向到 www.example.com 的基础
- javascript - 给定一个包含数字和字符串的数组,Javascript 返回小于 100 的数字