html - 并排 table 不能正常工作

Question

我在网上找到了以下 CSS，并在我的网站上使用它来显示并排表格。它们中的大多数在所有三种浏览器(IE11、Chrome 和 Firefox)中都运行良好，除了我的一个模板。虽然表格并排显示，但右侧表格的内容没有正确地完全填充单元格。相反，css 似乎在右表中创建了两列，并且只填写左列的内容，而右列留空。右表只有一个单元格。

这是创建并排表的代码:

.zui-table {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 12px Arial, sans-serif;
}

.zui-table thead th {
  background-color: ##DDEFEF;
  ;
  border: solid 1px #DDEEEE;
  ;
  color: #336B6B;
  padding: 3px;
  text-align: left;
  text-shadow: 1px 1px 1px #fff;
}

.zui-table tbody td {
  border: solid 1px #DDEEEE;
  ;
  color: #333;
  padding: 3px;
  text-shadow: 1px 1px 1px #fff;
}

.zui-table-horizontal tbody td {
  border-left: none;
  border-right: none;
}

<div id="wrap">
  <table CLASS="zui-table">
    <tbody>
      <tr>
        <td valign="top">
          <div class="medGreyText">Requester</div>
        </td>
        <td valign="top"><input type="text" name="requester" class="inputReqText" value="somevalue" Required="True"></td>
      </tr>
      <tr>
        <td valign="top">
          <div class="medGreyText">Requesting Institution</div>
        </td>
        <td valign="top">
          <select Name="req_institution" id="req_institution" class="RegSelect" Required="True">
            <option value="">--- Please select Institution ---</option>
            <option value="xx">xx</option>
            <option value="aa">aa</option>
            <option value="bb">bb</option>
            <option value="cc">cc</option>
          </select>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <div class="medGreyText">Requester's Email</div>
        </td>
        <td valign="top"><input name="req_email" id="req_email" type="text" class="inputReqText" value="" Required="True"></td>
      </tr>
      <tr>
        <td valign="top">
          <div class="medGreyText">Entity Type</div>
        </td>
        <td valign="top">
          <select Name="type" class="RegSelect" Required="True">
            <option value="">---Please select entity type ---</option>
            <option value="Ind">Individual</option>
            <option value="Org">Organization</option>
          </select>
        </td>
      </tr>
      <tr>
        <td valign="top">
          <div class="medGreyText">Advance ID</div>
        </td>
        <td valign="top"><input type="text" name="idno" id="idno" class="inputReqText" value="" Required="True"></td>
      </tr>
      <tr>
        <td align="center" colspan="2">
          <br><br>
          <input name="submit" type="submit" value="G E T  D A T A" class="SubmitButtons">
        </td>
      </tr>
    </tbody>
  </table>
  <table CLASS="zui-table">
    &larr; the problem area!!! <tbody>
      <tr>
        <td>
          <b>OFFICE  POLICY</b><br> It is the goal of the XX research office to offer its' constituents quality.....forth and clarifying our procedures and explaining some of our methods etc....
        </td>
      </tr>
      </tbody>
  </table>
</div>

正如您从屏幕截图中看到的那样，表格并排显示，但右侧表格的内容(office 策略)并未填充整个单元格，而是此模板上的此 css 并排创建了两列。从今天早上开始，我一直在调试它，但没有成功。

css zui-table-horizo​​ntal tbody td 似乎不起作用？？？

Answer 1

有多种方法可以使用 HTML/CSS 完成 2 个并排表格。这里已经有一个 SO 答案:

HTML — Two Tables Horizontally Side by Side

他们使用其中一种样式的示例将解决大多数情况:

display: inline-block

或

float: left

虽然有一些事情需要考虑。在移动设备上的响应式 HTML 中，您拥有的表格可能会一个接一个地排列，这对用户体验来说是一件好事。如果您强制将它们并排放置，很多用户将永远看不到右侧的表格。

如果并排表格是您真正想要的，您可以走老路，将您的表格嵌入到另一个表格中，并将每个表格放在单独的表格列中。

例如，以下代码片段生成您想要的内容:

.zui-table {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 12px Arial, sans-serif;
}

.zui-table thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  padding: 3px;
  text-align: left;
  text-shadow: 1px 1px 1px #fff;
}

.zui-table tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 3px;
  text-shadow: 1px 1px 1px #fff;
}

.zui-table-horizontal tbody td {
  border-left: none;
  border-right: none;
}

<div id="wrap">
  <table>
    <tr>
      <td>
        <table CLASS="zui-table">
          <tbody>
            <tr>
              <td valign="top">
                <div class="medGreyText">Requester</div>
              </td>
              <td valign="top"><input type="text" name="requester" class="inputReqText" value="somevalue" Required="True"></td>
            </tr>
            <tr>
              <td valign="top">
                <div class="medGreyText">Requesting Institution</div>
              </td>
              <td valign="top">
                <select Name="req_institution" id="req_institution" class="RegSelect" Required="True">
                  <option value="">--- Please select Institution ---</option>
                  <option value="xx">xx</option>
                  <option value="aa">aa</option>
                  <option value="bb">bb</option>
                  <option value="cc">cc</option>
                </select>
              </td>
            </tr>
            <tr>
              <td valign="top">
                <div class="medGreyText">Requester's Email</div>
              </td>
              <td valign="top"><input name="req_email" id="req_email" type="text" class="inputReqText" value="" Required="True"></td>
            </tr>
            <tr>
              <td valign="top">
                <div class="medGreyText">Entity Type</div>
              </td>
              <td valign="top">
                <select Name="type" class="RegSelect" Required="True">
                  <option value="">---Please select entity type ---</option>
                  <option value="Ind">Individual</option>
                  <option value="Org">Organization</option>
                </select>
              </td>
            </tr>
            <tr>
              <td valign="top">
                <div class="medGreyText">Advance ID</div>
              </td>
              <td valign="top"><input type="text" name="idno" id="idno" class="inputReqText" value="" Required="True"></td>
            </tr>
            <tr>
              <td align="center" colspan="2">
                <br><br>
                <input name="submit" type="submit" value="G E T  D A T A" class="SubmitButtons">
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td>
        <table CLASS="zui-table">
          <tbody>
            <tr>
              <td>
                <b>OFFICE  POLICY</b><br> It is the goal of the XX research office to offer its' constituents quality.....forth and clarifying our procedures and explaining some of our methods etc....
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</div>