Question

我正在尝试使用表格的table2属性将我的align="right"与右侧对齐，但是，它并不完全在table1旁边对齐，如JSFiddle here。相反，它会在我不想要的Third Heading旁边对齐。

我希望table 1和table 2彼此相邻，然后Heading 3应该低于它。

我试图解决的另一个问题是Heading 2与float:right的位置，如下所示。它没有走向极右。

＆＃13;

    .enc-data-table {
        margin: 0 0 45px 0;
    }
    .enc-data-table th {
        font-size: 12pt;
        /*font-weight: 700;*/
        
        padding: 0 5px 5px 0;
        text-align: right;
    }
    .enc-data-table td {
        font-size: 12pt;
        padding: 0 0 5px 0;
    }
    h3 {
        font-size: 20px;
    }
    h3 {
        width: 50%;
        height: 40px;
        margin: 0;
        padding: 0;
        display: inline;
    }
    hr {
        width: 100%
    }

＆＃13;

    <h3>Heading 1</h3>
    <h3 style="float:right">Heading 2</h3>
    <hr/>
    <table class="enc-data-table">
       <tr>
          <th>Location:</th>
          <td >A</td>
       </tr>
       <tr>
          <th>Type:</th>
          <td >B</td>
       </tr>
       <tr>
          <th>Dates:</th>
          <td >Today</td>
       </tr>
       <tr>
          <th>Reason for visit:</th>
          <td >D</td>
       </tr>
    </table>
    <table align= "right" class="enc-data-table">
       <tr>
          <th > Number:</th>
          <td >1111</td>
       </tr>
       <tr>
          <th >Plan Information:</th>
          <td >1111</td>
       </tr>
       <tr>
          <th >Date of service:</th>
          <td >Today</td>
       </tr>
       <tr>
          <th >Location Description:</th>
          <td >USA</td>
       </tr>
    </table>
    
    <h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
    <hr />

＆＃13;

Answer 1

你想要这样的东西吗？要正确设置表格对齐，我建议您单独设置th和td元素宽度！

    .enc-data-table th{
        width:20%
    }
    .enc-data-table tr{
        width:80%
    }

＆＃13;

.enc-data-table {
  margin: 0 0 45px 0;
  width: 50%;
}

.enc-data-table th {
  font-size: 12pt;
  /*font-weight: 700;*/
  padding: 0 5px 5px 0;
  text-align: right;
}

.enc-data-table td {
  font-size: 12pt;
  padding: 0 0 5px 0;
}

h3 {
  font-size: 20px;
}

h3 {
  width: 50%;
  height: 40px;
  margin: 0;
  padding: 0;
  display: inline;
}

hr {
  width: 100%
}


/*.enc-data-table th{
    width:20%
    }
    .enc-data-table tr{
    width:80%
    }*/

＆＃13;

<h3>Heading 1</h3>
<h3 style="float:right">Heading 2</h3>
<hr/>
<table class="enc-data-table" align="left">
  <tr>
    <th>Location:</th>
    <td>A</td>
  </tr>
  <tr>
    <th>Type:</th>
    <td>B</td>
  </tr>
  <tr>
    <th>Dates:</th>
    <td>Today</td>
  </tr>
  <tr>
    <th>Reason for visit:</th>
    <td>D</td>
  </tr>
</table>
<table align="right" class="enc-data-table">
  <tr>
    <th> Number:</th>
    <td>1111</td>
  </tr>
  <tr>
    <th>Plan Information:</th>
    <td>1111</td>
  </tr>
  <tr>
    <th>Date of service:</th>
    <td>Today</td>
  </tr>
  <tr>
    <th>Location Description:</th>
    <td>USA</td>
  </tr>
</table>

<h3>Third Heading <button class="btn btn-xs btn-success add-attribute-ctrl">ADD</button></h3>
<hr />

＆＃13;

HTML表格未在另一个表

1 个答案: