表中的tbody不是表中的thead

时间:2017-10-27 11:18:21

标签: css html-table

我的tbody表格不符合表格的thead

Screenshot of misaligned columns

table {
  width: 100%;
}
tbody {
  display: block;
  max-height: 160px;
  overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<table id="myHeader" class="scroll table table-striped table-hover table-bordered table-responsive">
  <thead>
    <tr>
      <th>Name</th>
      <th>Description</th>
      <th class="mobiile">Document</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>
          [userName]
        </td>
        <td>
          [userProfession]
        </td>
        <td class="mobiile"><iframe id="myHeader" src="https://i.stack.imgur.com/Pnq8a.jpg" width="250px" height="250px"></iframe></td>
        <td>
          <div class="dropdown">
            <button class="dropbtn">Action</button>
            <div class="dropdown-content">
              <a class="btn btn-primary" href="user_images/['userPic']"><span class="glyphicon glyphicon-eye-open"></span> View</a>
              <p id="i['userID']" style="display: none;">
                
                ['userPic']
              </p>
              <button onclick="copyToClipboard('#i['userID']')" class="btn btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Share</button>
              <script>
                function copyToClipboard(element) {
                  var $temp = $("<input>");
                  $("body").append($temp);
                  $temp.val($(element).text()).select();
                  document.execCommand("copy");
                  $temp.remove();
                  $("<div class='alert alert-success'>Copied url of image: <font color='blue'>[userName]</font>! </div>").insertBefore('#cr').delay(3000).fadeOut();
                }
              </script>
              <a class="btn btn-success" href="user_images/['userPic']" title="Download [userName]" download><span class="glyphicon glyphicon-download"></span> Download</a>
              <a class="btn btn-info" href="editform.php?edit_id=['userID']" title="click for edit"><span class="glyphicon glyphicon-edit"></span> Edit</a>
              <a class="btn btn-danger" href="?delete_id=['userID']" title="click for delete" onclick="return confirm('sure to delete ?')"><span class="glyphicon glyphicon-remove-circle"></span> Delete</a>
            </div>
          </div>
        </td>
      </tr>
  </tbody>
</table>

0 个答案:

没有答案