How to right align the button in html
Question
Actually I am trying to append the content from js to html table.And also with it I am trying to add a button below the table to the extreme right of the page.But I am not able to align it.Please guide where am I going wrong.
HTML Code is:
table { font-family: arial, sans-serif; border-collapse: collapse; width: 100% } td, th { border: 1px solid #dddddd; text-align: left; padding: 20px; } #table { margin-left: -900px; }
<!DOCTYPE html> <html> <head> <body> <div id="table" style="display:none"> <div class="container text-center"> <div class="row"> <div class="col-sm-4"></div> <!--If I remove this line the table only will not be displayed--> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Reportees List</div> <table id="employee_table" class="table table-hover" cellspacing="0" width="100%"> <tr> <th>Number</th> <th>Name</th> <th>UserId</th> <th>Count</th> </tr> </table> </div> </div> <div id="jiratable" style="display:none"> <div class="container text-center"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"> <div class="panel panel-primary" style="width: 240%;"> <div class="panel-heading">JIRA - List</div> <table class="table table-hover"> <table id="Jira_table" class="table table-hover" cellspacing="0" style="width:240%;table-layout:fixed"> <thead> <tr> <th width="80">Number</th> <th>JiraNumber</th> <th>JiraStatus</th> <th>EmailId</th> </tr> </thead> </table> </div> </div> </div> </div> <div class="container"> <div style="text-align:right; width:100%; padding:0;"> <button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button> </div> </div> </body> </html>
I don't know where I am going wrong.
Expected output is:
Number id name count Number JiraNumber Jirastatus EmailId
1 AG RAJ 0 1 TR-150 RS-Release **@gmail
2 TG Ram 3 1 TR-152 RS1-Release **@gmail
1 TR-153 RS2-Release **@gmail
SendMail Cancel
So I want the SendMail and cancel button to right.But the output is:
Number id name count Number JiraNumber Jirastatus EmailId
1 AG RAJ 0 1 TR-150 RS-Release **@gmail
2 TG Ram 3 1 TR-152 RS1-Release **@gmail
1 TR-153 RS2-Release **@gmail
SendMail Cancel
2 answers
solution1
1 2019-01-31 06:29:49
This is a list of your problems.
- You're missing alot of closing tags
- Your table won't display because you have
style="display:none"which mean it won't display. info for display - In the code you have lots of missing aligns which makes the table weird.
-
class="btn btn-primary btn-lg pull-right"this class is already right align - To align the tables side by side, either make a parent table for the data table or **within the CSS, you can set the division positioning **( which mean more work/more code you need to have )
Im suggesting you use this code.
table { font-family: arial, sans-serif; border-collapse: collapse; width: 50px; /*edit this as you want*/ } td, th { border: 1px solid #dddddd; text-align: left; padding: 20px; } /* to clear the border */ .noborder { border: none; }
<!DOCTYPE html> <html> <body> <table> <td> <div id="table" style="display:block"> <div class="container text-center"> <div class="row"> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">Reportees List</div> <table id="employee_table" class="table table-hover" cellspacing="0" width="100%"> <tr> <th>Number</th> <th>Name</th> <th>UserId</th> <th>Count</th> </tr> </table> </div> </div> </div> </div> </div> </td> <td> <div id="jiratable" style="display:block"> <div class="container text-center"> <div class="row"> <div class="col-sm-4"> <div class="panel panel-primary"> <div class="panel-heading">JIRA - List</div> <table id="Jira_table" class="table table-hover" cellspacing="0"> <tr> <th>Number</th> <th>JiraNumber</th> <th>JiraStatus</th> <th>EmailId</th> </tr> </table> </div> </div> </div> </div> </div> </td> <tr> <td class="noborder"></td> <td class="noborder"> <div class="container"> <div style="text-align:right; width:100%; padding:0;"> <button id="sendMail" onclick="sendMail()">SendMail</button> </div> </div> </td> </table> </body> </html>
Summary
The important thing you need to change are the closing of tags. This might effect your output.
Refer: About closing tag
solution2
0 2019-01-31 07:18:14
*You are not properly closed end div tags properly
*remove style hidden
*merge two tables and remove a border
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
border: none !important;
}
td,
th {
text-align: left;
padding: 20px;
}
<!DOCTYPE html>
<html>
<body>
<div id="table" style="display:block">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0" width="100%" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
<th>Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
<tr>
<td>1</td>
<td> Ag</td>
<td>1</td>
<td>Raj </td>
<td>0</td>
<td>1 </td>
<td>TR0-150</td>
<td>GMAIL </td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" class="btn btn-primary btn-lg pull-right" style="color: white; background-color: blue;padding:5px" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to align button to right in bootstrap 4
How to align button to the right of this textarea
How to <li> align in right in HTML
How to align a column to the right in html
How to align button on right from textarea in table?
how to align a button to the right of a text area input?
How to align the button right next to the search box
How to align the search button to the right of search box
How to align button right in a flex container?
How to make button icons align to right
Related Tags