tbody in table is not as per thead in table

Question

My tbody of table is not as per thead of table.

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>

Your question is unclear and you have not included your HTML code that renders the table. — Robert Wade, Oct 27 '17 at 11:20
@MKJ: Fine. But where is the css for `.scroll`, `.table`, `.table-striped`, `.table-hover`, `.table-bordered`, and `.table-responsive`? Please take a look at [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) P.S.: You didn't even asked a question, did you? — Clijsters, Oct 27 '17 at 11:29
You have some bad syntax in your table HTML. There are stray closing span and div tags that don't belong to anything. Most likely why your table is jacked up. Clean up your HTML and make sure it's valid with appropriate opening and closing tags. — Robert Wade, Oct 27 '17 at 11:30
@Clijsters Maximum CSS are from bootstrap https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css — MKJ, Oct 27 '17 at 11:31
@RobertWade I have just copied table HTML, there are lots of codes in my file which have closing or opening tags just before or after table — MKJ, Oct 27 '17 at 11:33
@MKJ: Fine. Now take all those information from the comments and edit your question again, supplementing it with them. — Clijsters, Oct 27 '17 at 11:33
Please take some time to read the help page, especially the sections named ["What topics can I ask about here?"](http://stackoverflow.com/help/on-topic) and ["What types of questions should I avoid asking?"](http://stackoverflow.com/help/dont-ask). And more importantly, please read [the Stack Overflow question checklist](http://meta.stackexchange.com/q/156810/204922). You might also want to learn about [Minimal, Complete, and Verifiable Examples](http://stackoverflow.com/help/mcve). — Clijsters, Oct 27 '17 at 11:33
What I'm saying is that I pasted your table code into an editor, stripped out your PHP and there are HTML syntax errors. Make sure your code is valid. — Robert Wade, Oct 27 '17 at 11:35
@RobertWade Will this help you out? https://www.w3schools.com/code/tryit.asp?filename=FKX2GXK5Y3PW — MKJ, Oct 27 '17 at 11:42
@MKJ See my answer below. You have to `` closing tags in your code with no opener that is throwing off your table layout. — Robert Wade, Oct 27 '17 at 11:44
@Clijsters I have updated my question to the latest version, any updates sir? — MKJ, Oct 27 '17 at 11:59
I'm going to redact my answer because what you're trying to accomplish with tables and scrolling is much more complicated than just some simple CSS. I suggest you take a look at this page and the accepted answer: https://stackoverflow.com/questions/17067294/html-table-with-100-width-with-vertical-scroll-inside-tbody — Robert Wade, Oct 27 '17 at 12:47

tbody in table is not as per thead in table

0 Answers0