HTML如何相对于两个div定位按钮？

Question

我有两个表放在两个div中，它们将屏幕垂直分成两半。这些表具有可折叠的行，可以在单击时展开。

在表格的底部，我放置了一个相对于div1定位的提交按钮。因此，当div1中的表扩展时，按钮会按预期向下移动。但是当div2中的表格扩展时，按钮会保持在它的位置。

我的问题是，我是否可以相对于两个div创建此按钮，以便当任何表格（从div1或div2扩展）时它应该移动。

addPlusSign();
$(".btn1").click(function() {
  $(".expand1").toggle();
  var btn1Text = $(".btn1").text();
  if (btn1Text.indexOf("+") > -1) {
    var temp = btn1Text.replace(/\+|\-/ig, '-');
    $(".btn1").text(temp);
  } else if (btn1Text.indexOf("-") > -1) {
    var temp = btn1Text.replace(/\+|\-/ig, '+');
    $(".btn1").text(temp);
  }
});
$(".btn2").click(function() {
$(".expand2").toggle();
var btn1Text = $(".btn2").text();
if (btn2Text.indexOf("+") > -1) {
  var temp = btn2Text.replace(/\+|\-/ig, '-');
  $(".btn2").text(temp);
} else if (btn2Text.indexOf("-") > -1) {
  var temp = btn2Text.replace(/\+|\-/ig, '+');
  $(".btn2").text(temp);
}
});
})

function addPlusSign() {
  if ($(".expand1")) {
    var btn1Text = $(".btn1").text();
    $(".btn1").text(btn1Text + " [+]");
  }
  if ($(".expand2")) {
    var btn2Text = $(".btn2").text();
    $(".btn2").text(btn1Text + " [+]");
  }
}
$(function() {
  $('.admin-form')
    //we need to save values from all inputs with class 'admin-input'
    .find(':input.admin-input')
    .each(function() {
      //save old value in each input's data cache
      $(this).data('oldValue', $(this).val())
    })
    .end()
    .submit(function(ev) {
      var changed = false;
      $(':input.admin-input', this).filter(function() {
        if ($(this).val() != $(this).data('oldValue')) {
          changed = true;
        }
      });
      if ($(this).hasClass('changed') && (!changed)) {
        alert("None of the thresholds were changed!");
        ev.preventDefault()
      }
      if ($(this).hasClass('changed') && changed) {
        var allowSubmit = window.confirm("You have set a unique threshold for one or more sub-elements below. Are you sure you want to reset them all?")
        if (!allowSubmit)
          ev.preventDefault()
      }
    });
});
$(document).on('input', '.admin-input', function() {
  $(this).closest('form').addClass('changed');
});

.expand1 {
  display: none;
}
.btn1 {
  cursor: pointer;
}
.expand2 {
  display: none;
}
.btn2 {
  cursor: pointer;
}
body {
  background-color: rgb(255, 255, 255);
  font: 15px Verdana, Helvetica, sans-serif;
}
table#t02,
#t02 th,
#t02 td {
  border: none;
  border-collapse: collapse;
  font-size: 90%;
  font-weight: normal;
}
table#t03,
#t03 th,
#t03 td {
  border: none;
  border-collapse: collapse;
  font-size: 90%;
  font-weight: normal;
}
#button1 {
  position: relative;
  top: 20px;
  left: 85%;
  color: white;
  background-color: rgb(0, 89, 132);
  font-weight: bold;
}
html {
  overflow-y: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post" class="admin-form">
  <div style="float:left; width:50%">
    <table id="t02" class="table2">
      <tr>
        <th style="padding:0 30px 0 0;"></th>
        <th></th>
        <th style="padding:0 10px 0 0;">Green</th>
        <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
        <th></th>
        <th style="padding:0 10px 0 0">Red</th>
      </tr>
      <tr>
        <td class="btn1" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
        </td>
        <td>&lt</td>
        <td style="padding:0 10px 0 0">
          <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
        </td>
        <td>
          <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
        </td>
        <td>to</td>
        <td style="padding:0 10px 0 0">
          <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
        </td>
        <td>&gt</td>
        <td style="padding:0 10px 0 0">
          <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row1</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row2</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row3</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row4</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row5</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row6</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row7</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row8</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row9</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand1">Hidden Row10</td>
        <td class="expand1">&lt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand1">to</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand1">&gt</td>
        <td class="expand1">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
    </table>
    <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px" />
  </div>
  <div style="float:left; width:50%">
    <table id="t03" class="table3">
      <tr>
        <th style="padding:0 30px 0 0;"></th>
        <th></th>
        <th style="padding:0 10px 0 0;">Green</th>
        <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
        <th></th>
        <th style="padding:0 10px 0 0">Red</th>
      </tr>
      <tr>
        <td class="btn2" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
        </td>
        <td>&lt</td>
        <td style="padding:0 10px 0 0">
          <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
        </td>
        <td>
          <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
        </td>
        <td>to</td>
        <td style="padding:0 10px 0 0">
          <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
        </td>
        <td>&gt</td>
        <td style="padding:0 10px 0 0">
          <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row1</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row2</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row3</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row4</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row5</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row6</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row7</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row8</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row9</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
      <tr>
        <td align="center" class="expand2">Hidden Row10</td>
        <td class="expand2">&lt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
        </td>
        <td class="expand2">to</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
        </td>
        <td class="expand2">&gt</td>
        <td class="expand2">
          <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
        </td>
      </tr>
    </table>
  </div>
</form>

View on JSFiddle

Answer 1

为了在任一行展开时让提交按钮向下移动，您可以将提交移出两个div之外，如下所示：

https://jsfiddle.net/naL11ram/2/

HTML：

<body>
    <form id="form1" method="post" class="admin-form">
        <div style="float:left; width:50%">
            <table id="t02" class="table2">
                <tr>
                    <th style="padding:0 30px 0 0;"></th>
                    <th></th>
                    <th style="padding:0 10px 0 0;">Green</th>
                    <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
                    <th></th>
                    <th style="padding:0 10px 0 0">Red</th>
                </tr>
                <tr>
                    <td class="btn1" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
                    </td>
                    <td>&lt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>to</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td>&gt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row1</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row2</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row3</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row4</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row5</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row6</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row7</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row8</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row9</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand1">Hidden Row10</td>
                    <td class="expand1">&lt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">to</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand1">&gt</td>
                    <td class="expand1">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
            </table>
        </div>
        <div style="float:left; width:50%">
            <table id="t03" class="table3">
                <tr>
                    <th style="padding:0 30px 0 0;"></th>
                    <th></th>
                    <th style="padding:0 10px 0 0;">Green</th>
                    <th colspan="3" style="padding:0 10px 0 0">Yellow</th>
                    <th></th>
                    <th style="padding:0 10px 0 0">Red</th>
                </tr>
                <tr>
                    <td class="btn2" style="padding:0 30px 0 0;"><b>Collapsible Row1</b>
                    </td>
                    <td>&lt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_good_high" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_low" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td>to</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_warning_high" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td>&gt</td>
                    <td style="padding:0 10px 0 0">
                        <input type="text" , class="admin-input" , name="acd_call_volume_critical_low" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row1</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row1" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row1" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row2</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row2" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row2" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row3</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row3" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row3" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row4</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row4" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row4" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row5</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row5" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row5" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row6</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row6" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row6" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row7</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row7" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row7" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row8</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row8" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row8" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row9</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row9" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row9" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
                <tr>
                    <td align="center" class="expand2">Hidden Row10</td>
                    <td class="expand2">&lt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_good_high_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_low_Hidden Row10" , value="50" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">to</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_warning_high_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                    <td class="expand2">&gt</td>
                    <td class="expand2">
                        <input type="text" , name="acd_call_volume_critical_low_Hidden Row10" , value="100" , size="3" , maxlength="3">
                    </td>
                </tr>
            </table>
        </div>
        <div style="clear:both"></div>
        <div class="button">
            <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px" />
        </div>
    </form>
</body>

CSS：

.expand1 {
    display: none;
}
.btn1 {
    cursor: pointer;
}
.expand2 {
    display: none;
}
.btn2 {
    cursor: pointer;
}
body {
    background-color: rgb(255, 255, 255);
    font: 15px Verdana, Helvetica, sans-serif;
}
table#t02, #t02 th, #t02 td {
    border: none;
    border-collapse: collapse;
    font-size:90%;
    font-weight:normal;
}
table#t03, #t03 th, #t03 td {
    border: none;
    border-collapse: collapse;
    font-size:90%;
    font-weight:normal;
}
.button {
    text-align:center;
}
#button1 {
    margin-top:20px;
    color: white;
    background-color: rgb(0, 89, 132);
    font-weight: bold;
}
html {
    overflow-y: scroll;
}

Answer 2

您可以移动html代码底部的提交按钮，并添加clear属性以重置浮动。

喜欢这个......

        ...
        <div style="width:100%;clear:both">
            <input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
        </div>
    </form>
</body>

在这里小提琴：https://jsfiddle.net/naL11ram/4/

Answer 3

更新了你的小提琴 看起来你只需要两个表周围的包装div然后将按钮放在包装器div之外

https://jsfiddle.net/naL11ram/1/

这是你的代码要求改变

<body>
<form id="form1" method="post" class="admin-form">
<div id="wrapper">
<div style="float:left; width:50%">
<table id="t02" class="table2">

这是代码的结尾

</table>
</div>
</div>
<input type="submit" name="submitButton" value="Submit" id="button1" style="height:50px; width:100px"/>
</form>