html - html无法将表格逐行对齐

我正在尝试逐行显示消息，最后显示一个文本框以供输入以发送消息，现在我面临的问题是我可以逐行显示消息，但是该文本框将显示在水平显示消息。文本框不能显示在页面的底部。这是意外的结果图像。我尝试了很多方法，但似乎无法解决。
    

编辑：我需要在左侧显示传入消息，在右侧显示传出消息

<div class="container">
  <div class="row">
    <div class="row" style="width:100%">
      <table>
        <tr>
          <td bgcolor="#CCFFEE">
            test() blah,blah,blah 2016-08-12 04:44:20
          </td>
          <td>
            <img src="" alt="Smiley face" height="80" width="80">
          </td>
          <td></td>
          <td></td>
          <tr>
            <tr>
              <td bgcolor="#CCFFEE">
                test() Hi 2016-08-12 04:43:16
              </td>
              <td>
                <img src="" alt="Smiley face" height="80" width="80">
              </td>
              <td></td>
              <td></td>
              <tr>
      </table>
      <br/>
      <br/>
      <table>
        <form action="/v1/reply" method="post" onsubmit="return validateForm();window.location.reload();" name="myForm">
          <tr>
            <td>
              <input type="text" id="body" name="body" style="width:700px;height:50px;">
            </td>
            <td>
              <button type="submit" style="width:100px;height:50px;" id="sent_1" value="Send">Submit</button>
            </td>
          </tr>
          <br>
        </form>
      </table>
    </div>

最佳答案

如果要display: inline-table比另一个float:right;宽，请使用float:left，然后使用<td>和<td>，请使用colspan。以下代码段中使用了所有更多的属性和属性：

SNIPPET

.msg {
  display: inline-table;
  table-layout: fixed;
  border-collapse: collapse;
  width: 50%;
}
.left {
  float: left;
  text-align: left;
}
.right {
  float: right;
  text-align: right;
}
.input {
  width: 100%;
}
img {
   display: block;
   padding:0 80% 0 0;
   margin: 0 auto 0 0;
}

<div class="container">
  <div class="row">
    <div class="row" style="width:100%">
      <form action="http://www.hashemian.com/tools/form-post-tester.php" method="post" name="myForm">
        <table class='left msg'>
          <tr>
            <td colspan='2' bgcolor="#CCFFEE">
              test() blah,blah,blah 2016-08-12 04:44:20
            </td>
            <td>
              <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
            </td>

            <tr>
              <tr>
                <td colspan='2' bgcolor="#CCFFEE">
                  test() Hi 2016-08-12 04:43:16
                </td>
                <td>
                  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
                </td>

                <tr>
        </table>
        <table class='right msg'>
          <tr>
            <td colspan='2' bgcolor="#CCFFEE">
              test() blah,blah,blah 2016-08-12 04:44:20
            </td>
            <td>
              <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
            </td>

            <tr>
              <tr>
                <td colspan='2' bgcolor="#CCFFEE">
                  test() Hi 2016-08-12 04:43:16
                </td>
                <td>
                  <img src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" alt="Smiley face" height="80" width="80">
                </td>

                <tr>
        </table>
        <table class='input msg'>

          <tr>
            <td colspan='5'>
              <input type="text" id="body" name="body" style="width:100%;height:50px;">
            </td>
            <td>

              <input type='submit' style="width:100px;height:50px;" id="sent_1" value="Submit">
            </td>
          </tr>


        </table>

      </form>
    </div>
  </div>
</div>

关于html - html无法将表格逐行对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38931915/