对齐两个表

时间:2017-04-12 20:15:58

标签: css

问题:我能够并排排列两张桌子。

我遇到的问题是当我尝试打印这两个表时,第二个表出现在第二页上,而不是与之前的表一起。

我做了以下事情:

.table2 {
  float: left;
  background: yellow;
}

.table1 {
  float: left;
  background: green;
}

.blah {
  text-align: center;
  padding-bottom: 12px;
  font-family: century gothic !important;
  font-size: 12pt !important;
  font-weight: bold;
  padding-top: 80px;
}

.blah2 {
  font-family: century gothic !important;
  font-size: 11pt !important;
}

.blah3 {
  padding-bottom: 12px;
  font-family: times !important;
  font-size: 11pt !important;
}

.blah4 {
  font-family: century gothic !important;
  font-size: 11pt !important;
}

.blah5 {
  font-family: century gothic !important;
  font-size: 11pt !important;
}

.blah6 {
  font-family: century gothic !important;
  font-size: 8pt !important;
}
<div style="text-align: center"><img src="image.png" /></div>
<div class="blah">Notice Informing Individuals about Nondiscrimination<br /> and Accessibility Requirements</div>
<div class="blah2">
  <div style="padding-bottom: 8px; font-weight: bold">Discrimination is against the law</div>
  <div style="padding-bottom: 15px; width: 92%">Blue Shield of California complies with applicable federal civil rights laws and does not discriminate on the basis of race, color, national origin, age, disability or sex. Blue Shield of California does not exclude people or treat them differently
    because of race, color, national origin, age, disability or sex.</div>Blue Shield of California:
  <div class="blah3">
    <table class="table2" width="90%">
      <tbody>
        <tr>
          <td colspan="2" class="blah4">• Provides aids and services at no cost to people with disabilities to communicate <br /> &nbsp;&nbsp; effectively with us such as:
            <div class="blah4">-&nbsp;&nbsp; Qualified sign language interpreters</div>
            <div class="blah4">-&nbsp;&nbsp; Written information in other formats (including large print, audio, accessible <br /> &nbsp;&nbsp;&nbsp; electronic&nbsp;formats and other formats)</div>
          </td>
        </tr>
        <tr>
          <td colspan="2" class="blah4">• Provides language services at no cost to people whose primary language is not English<br /> &nbsp;&nbsp; such as
            <div class="blah4">-&nbsp;&nbsp; Qualified interpreters</div>
            <div class="blah4">-&nbsp;&nbsp; Information written in other languages</div>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="width: 95%;" class="blah5">If you need these services, contact the Blue Shield of California Civil Rights Coordinator.<br />
            <br /> If you believe that Blue Shield of California has failed to provide these services or discriminated in another way on the basis of race, color, national origin, age, disability, or sex, you can file a grievance with:<br />
            <br />
            <div class="blah5">Blue Shield of California <br /> Civil Rights Coordinator<br /> P.O. Box 629007<br /> El Dorado Hills, CA 95762-9007</div>
            <div style="margin-top: 5px; font-weight: bold" class="blah5">Phone: (844) 831-4133 (TTY: 711)<br /> Fax: (916) 350-7405<br /> Email: BlueShieldCivilRightsCoordinator@blueshieldca.com</div><br />
            <div style="padding-bottom: 12px;" class="blah5">You can file a grievance in person or by mail, fax, or email. If you need help filing a grievance, our Civil Rights Coordinator is available to help you.</div>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table1">
      <tbody>
        <tr>
          <td><img src="image.png" /></td>
        </tr>
      </tbody>
    </table>
    <table width="95%">
      <tbody>
        <tr>
          <td><span class="blah6">Blue Shield of California</span><br />
            <span class="blah6">50 Beale Street, San Francisco, CA 94105</span></td>
          <td style="text-align: right; vertical-align: bottom"><span style="font-family: century gothic !important; font-size: 8pt !important">blueshieldca.com</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我也尝试了以下内容。再次,它与文本一起显示图像。但是,当我尝试将其打印出来时,会强制图像跳转到第二页:

.blah {
  text-align: center;
  padding-bottom: 12px;
  font-family: century gothic !important;
  font-size: 12pt !important;
  font-weight: bold;
  padding-top: 80px;
}

.blah2 {
  font-family: century gothic !important;
  font-size: 11pt !important;
}

.blah3 {
  padding-bottom: 12px;
  font-family: times !important;
  font-size: 11pt !important;
}

.blah4 {
  font-family: century gothic !important;
  font-size: 11pt !important;
}

.blah5 {
  font-family: century gothic !important;
  font-size: 11pt !important;
}

.blah6 {
  font-family: century gothic !important;
  font-size: 8pt !important;
}
<div style="text-align: center"><img src="image.png" /></div>
<div class="blah">Notice Informing Individuals about Nondiscrimination<br /> and Accessibility Requirements</div>
<div class="blah2">
  <div clas="blah2" style="padding-bottom: 8px; font-weight: bold">Discrimination is against the law</div>
  <div style="padding-bottom: 15px; width: 92%">Blue Shield of California complies with applicable federal civil rights laws and does not discriminate on the basis of race, color, national origin, age, disability or sex. Blue Shield of California does not exclude people or treat them differently
    because of race, color, national origin, age, disability or sex.</div>Blue Shield of California:
  <div class="blah2">
    <table width="99%">
      <tbody>
        <tr>
          <td colspan="2" sclass="blah2">&bull; Provides aids and services at no cost to people with disabilities to communicate <br /> &nbsp;&nbsp; effectively with us such as:
            <div class="blah2">-&nbsp;&nbsp; Qualified sign language interpreters</div>
            <div class="blah2">-&nbsp;&nbsp; Written information in other formats (including large print, audio, accessible <br /> &nbsp;&nbsp;&nbsp; electronic&nbsp;formats and other formats)</div>
          </td>
          <td rowspan="4" style="text-align: right; vertical-align: bottom"><img src="image.png" /></td>
        </tr>
        <tr>
          <td colspan="2" class="blah2">&bull; Provides language services at no cost to people whose primary language is not English<br /> &nbsp;&nbsp; such as
            <div stclass="blah2">-&nbsp;&nbsp; Qualified interpreters</div>
            <div class="blah2">-&nbsp;&nbsp; Information written in other languages</div>
          </td>
        </tr>
        <tr>
          <td colspan="2" style="width: 95%;" class="blah2"><br /> If you need these services, contact the Blue Shield of California Civil Rights Coordinator.<br />
            <br /> If you believe that Blue Shield of California has failed to provide these services or discriminated in another way on the basis of race, color, national origin, age, disability, or sex, you can file a grievance with:<br />
            <br />
            <div class="blah2">Blue Shield of California <br /> Civil Rights Coordinator<br /> P.O. Box 629007<br /> El Dorado Hills, CA 95762-9007</div>
            <div style="margin-top: 5px; font-weight: bold" class="blah2">Phone: (844) 831-4133 (TTY: 711)<br /> Fax: (916) 350-7405<br /> Email: BlueShieldCivilRightsCoordinator@blueshieldca.com</div><br />
            <div style="padding-bottom: 12px;" class="blah2">You can file a grievance in person or by mail, fax, or email. If you need help filing a grievance, our Civil Rights Coordinator is available to help you.</div>
          </td>
        </tr>
      </tbody>
    </table>
    <table width="95%">
      <tbody>
        <tr>
          <td><span class="blah6" style="font-weight:bold">Blue Shield of California</span><br />
            <span class="blah6">50 Beale Street, San Francisco, CA 94105</span></td>
          <td style="text-align: right; vertical-align: bottom"><span class="blah6">blueshieldca.com</span></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我如何实现显示屏幕上显示的内容,这意味着两个表并排,并将第二个表推送到第二页?

1 个答案:

答案 0 :(得分:0)

这是您的解决方案。将您的2张桌子嵌入桌子中。

&#13;
&#13;
<table>
  <tr>
    <td>
      <table>
        <tr>
          <td>
            TABLE 2
          </td>
        </tr>
      </table>
    </td>
    <td>
      <table>
        <tr>
          <td>
            TABLE 1
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
&#13;
&#13;
&#13;