side by side table is not working properly

Question

I found the following css on the net and used it on my site to show a side by side tables. Most of them are working nicely in all three browsers, IE11, Chrome and Firefox except on one of my template. Although the tables show side by side but the content of the right table does not fully fill the cell correctly. Instead, it seems like the css creates two columns on the right table and only fill in the content of the left column leaving the right column blank. The right table only have one cell.

Here is the codes creating side by side tables:

.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>

As you see from the screenshot, the tables appear side by side but the content of the right table, the office policy, is not populating the whole cell but instead this css on this template creates two columns side by side. I've been debugging this since this morning with no success.

the css zui-table-horizontal tbody td does not seem to work???

Answer 1

There are several ways to accomplish 2 side-by-side tables with HTML/CSS. There is already an SO answer here:

HTML — Two Tables Horizontally Side by Side

Their example of using one of these styles will solve most cases:

display: inline-block

or

float: left

There are a few things to consider though. In responsive HTML on a mobile device, the tables as you have it will probably go one above the other, which is a good thing for the user experience. If you force them to be side-by-side, the user many never see the right side table.

If side-by-side tables is what you really want, you could go old school and embed your tables in another table, and put each table in separate table columns.

For example, the following snippet generates what you want:

.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>