Question

我正在尝试在容器div中显示两个表，它在Firefox中完美运行，并且完全符合我的预期，但在IE中它将我的第二个表移到我的div之外。任何人都有任何想法，我遇到的问题是什么？如果我自己放入任何一个表都没有问题，但是当我添加第二个表时，无论哪个表首先出现，我都会遇到问题。

表格代码：

<div id="contentContainer" style="border: 1px solid black;">
  <table id="filterPostingsTable" align="Left" border="0" style="width:100%;">
    <tr>
      <th>Status</th>
      <th>PositionTitle</th>
      <th>Classification</th>
      <th>Location</th>
      <th>Filter</th>
    </tr>
    <tr>
      <td align="center">
        <select name="filterStatus" id="filterStatus">
          <option selected="selected" value="">Select Status</option>
          <option value="Active">Active</option>
          <option value="Interviewing">Interviewing</option>
          <option value="New">New</option>
        </select>
      </td>
      <td align="center">
        <input name="filterPositionTitle" type="text" id="filterPositionTitle" />
      </td>
      <td align="center">
        <select name="922e5a87-18fd-467f-9e7b-f4210fbd93ea" id="922e5a87-18fd-467f-9e7b-f4210fbd93ea">
          <option value="0">Select One...</option>
          <option value="9c2e6df7-e319-478c-b137-47eff4e4748d">Administrative</option>
          <option value="78ce598b-6dad-4434-9bb5-24429c630943">Certified</option>
          <option value="c75f18a4-e503-428c-8e23-83d1dac21997">Classified</option>
          <option value="77232a27-2c58-4192-bbbf-1b0b493da564">Other</option>
        </select>
      </td>
      <td align="center">
        <select name="filterLocation" id="filterLocation">
          <option value="Select Location">Select Location</option>
          <option value="77c68429-e878-4778-b467-0d684308b188">Desert Foothills</option>
          <option value="d226f2a3-02c4-40c5-b784-949c22647081">District Office</option>
        </select>
      </td>
      <td align="center">
        <input type="submit" name="filterJobs" value="Filter Postings" id="filterJobs" />
      </td>
    </tr>
  </table>

  <table id="jobPostingsTable" class="tablesorter" align="Left" border="0" style="width:100%;float: left">
    <thead>
      <tr>
        <th></th>
        <th>Status</th>
        <th>Position Title</th>
        <th>Classification</th>
        <th>Working Location</th>
      </tr>
    </thead>
    <tbody>
      <tr id="2a62a993-fc3a-4a43-96b6-fd663a724b6e">
        <td>
          <input id="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" type="checkbox" name="apply2a62a993-fc3a-4a43-96b6-fd663a724b6e" />
        </td>
        <td>New</td>
        <td valign="middle">
          <span>Systems Analyst</span>
          <a href="getJobDescription.aspx?Description=f863c3c9-fc68-42f8-ae3b-686575ab7a36"><img src="images/pdf.png" style="border-width:0px;" /></a>
        </td>
        <td>Classified</td>
        <td>District Office</td>
      </tr>
    </tbody>
  </table>
</div>

适用的CSS如下：

#contentContainer {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:auto;
margin:0;
width:1000px;
}

所有表格都设置为100％的宽度。图像中的按钮并不重要，因为它们似乎不会影响表格问题，无论它们是否存在。通常这种方式可以正常工作，但在IE 7中它现在呈现如下：

alt text

Answer 1

如果要浮动表格，则需要宽度（以像素为单位），而不是百分比。

在IE中的div中显示两个表的问题

1 个答案: