并排表不能正常工作

时间：2018-01-12 16:28:03

标签： html css html-table

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

以下是创建并排表格的代码：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

enter image description here

1 个答案:

答案 0 :(得分：1)

有几种方法可以使用HTML / CSS完成2个并排表。这里已经有了答案：

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>

相关问题
最新问题