固定宽度的HTML tableheadercell没有相应的表现。

问题描述 投票：1回答：1

我在下表中的 "网站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>

非常感谢.Luca

html css fixed-width
1个回答
0
投票

只要添加 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.