Question

即使边距为0，也无法在div中对齐表格。这两个表需要在桌面模式下并排放置，但要在移动设备或ipad上分开。

＆＃13;

/*Table*/
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:archer, sans-serif;font-size:14px;padding:10px 9px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:archer, sans-serif;font-size:14px;font-weight:normal;padding:10px 9px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-yw4l{vertical-align:top; }
table.fixed2 {width:260px;}/*Setting the table width is important!*/
.outerdiv {
	display: block;
	width: 50%;
	margin: auto;
}

＆＃13;

<div class="inner_tables">

<table class="tg fixed2 animated" style="float: left; align="center" >
  <tr>
    <th class="tg-yw4l" colspan="2" ><p class="bold white letterspacing">THE RATE</p></th>
  </tr>
  <tr>
    <td class="tg-yw4l"><img src="images/225.png" height="100px" width="100px"></td>
    <td class="tg-yw4l">Take advantage of our RRSP or Tax-Free 12 month non-redeemable term deposit</td>
  </tr>
</table>

<table class="tg fixed2 animated" style="float: left; align="center" >
  <tr>
    <th class="tg-yw41" colspan="2"><p class="bold white letterspacing">THE DEADLINE</p></th>
  </tr>
  <tr>
    <td class="tg-yw4l"><img src="images/date.png" height="100px" width="100px"></td>
    <td class="tg-yw4l">The deadline for making an
RRSP contribution for the 2017 tax year is March 1, 2018.</td>
  </tr>
</table></div>

＆＃13;

Answer 1

我建议将两个表都包装到一个主表中，并将align='center'应用于表中心对齐。

在表格中使用floats不是一个好习惯。

Stack Snippet

.tg,
td,
th,
table {
  border-collapse: collapse;
  border-spacing: 0;
  padding:0;
  table-layout:fixed;
}

.tg td {
  font-family: archer, sans-serif;
  font-size: 14px;
  padding: 10px 9px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: archer, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 9px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-yw4l {
  vertical-align: top;
}

table.fixed2 {
  width: 260px;
}


/*Setting the table width is important!*/

.outerdiv {
  display: block;
  width: 50%;
  margin: auto;
}

<div class="inner_tables">
  <table align="center">
    <tbody>
      <tr>
        <td>
          <table class="tg fixed2 animated" align="center">
            <tr>
              <th class="tg-yw4l " colspan="2 ">
                <p class="bold white letterspacing ">THE RATE</p>
              </th>
            </tr>
            <tr>
              <td class="tg-yw4l "><img src="images/225.png " height="100px " width="100px "></td>
              <td class="tg-yw4l ">Take advantage of our RRSP or Tax-Free 12 month non-redeemable term deposit</td>
            </tr>
          </table>
        </td>
        <td>
          <table class="tg fixed2 animated" align="center">
            <tr>
              <th class="tg-yw41" colspan="2">
                <p class="bold white letterspacing">THE DEADLINE</p>
              </th>
            </tr>
            <tr>
              <td class="tg-yw4l"><img src="images/date.png" height="100px" width="100px"></td>
              <td class="tg-yw4l">The deadline for making an RRSP contribution for the 2017 tax year is March 1, 2018.</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

您可以将flexbox属性应用于外部容器：

＆＃13;

/*Table*/

.inner_tables {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: archer, sans-serif;
  font-size: 14px;
  padding: 10px 9px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg th {
  font-family: archer, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 9px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
}

.tg .tg-yw4l {
  vertical-align: top;
}

table.fixed2 {
  width: 260px;
}


/*Setting the table width is important!*/

.outerdiv {
  display: block;
  width: 50%;
  margin: auto;
}

＆＃13;

<div class="inner_tables">

  <table class="tg fixed2 animated" style="float: left; align=" center " >
  <tr>
    <th class="tg-yw4l " colspan="2 " ><p class="bold white letterspacing ">THE RATE</p></th>
  </tr>
  <tr>
    <td class="tg-yw4l "><img src="images/225.png " height="100px " width="100px "></td>
    <td class="tg-yw4l ">Take advantage of our RRSP or Tax-Free 12 month non-redeemable term deposit</td>
  </tr>
</table>

<table class="tg fixed2 animated " style="float: left; align="center">
    <tr>
      <th class="tg-yw41" colspan="2">
        <p class="bold white letterspacing">THE DEADLINE</p>
      </th>
    </tr>
    <tr>
      <td class="tg-yw4l"><img src="images/date.png" height="100px" width="100px"></td>
      <td class="tg-yw4l">The deadline for making an RRSP contribution for the 2017 tax year is March 1, 2018.</td>
    </tr>
  </table>
</div>

＆＃13;

即使边距0自动也无法居中对齐表格;

2 个答案: