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
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
*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>
Related
How to remove gap between two td ? I have tried some below solutions
from the Internet but none of them work. Attached the screenshot for
reference too. It will give clear idea of problem. The gap between two TD is very wide. How to reduce this Gap.
class="align-middle"
CELLSPACING=0
row-gap: 0;
class="views-field views-field-region views-align-center"
<app-header></app-header>
<section class="container">
<div class="row" style="background-color: white;">
<div class="col-xs-12 col-sm-8 col-md-4" >
<form action="/update/pricelist" method="POST" id="upload-file" enctype="multipart/form-data">
<h3>Import Pricelist</h3>
<hr>
<div class="wrapper-messages">
</div>
<br>
<input type="file" name="price_list" id="edit_price_list" (change)="ReadExcel($event)">
<div class="error-msg"></div>
<hr>
<div class="views-exposed-widget views-submit-button">
<button type="submit" class="btn btn-info form-submit icon-before submit-pricelist">
<span class="icon glyphicon glyphicon-ok" aria-hidden="true"></span>
Import
</button>
</div>
<br>
</form>
</div>
</div>
</section>
<!-- Table for excel -->
<div class="main-container container-fluid">
<div class="row">
<section id="block-views-exp-land-page" class="block block-views clearfix">
<form autocomplete="off" action="" method="post" id="views-exposed-form-land-page" accept-charset="UTF-8">
<div>
<section id="block-system-main" class="block block-system clearfix">
<div
class="view view-land view-id-land view-display-id-page table-checkbox-all view-dom-id-8d32f83bab6c36c396b926a7c7c35f7f">
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr>
<th class="views-field views-field-region views-align-center">
Autodesk Material Description
</th>
<th class="views-field views-field-php-4 views-align-center">
Autodesk SAP Material Description
</th>
<th class="views-field views-field-php-2 views-align-center">
Product Coming From
</th>
<th class="views-field views-field-php-2 views-align-center">
Media
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr *ngFor="let pricedata of ExcelData" class="align-middle">
<td>
{{pricedata.Autodesk_Material_Description}}
</td>
<td>
{{pricedata.Autodesk_SAP_Material_Description}}
</td>
<td>
{{pricedata.Product_Coming_From}}
</td>
<td>
{{pricedata.Media}}
</td>
</tr>
</thead>
</table>
</div>
</div>
</section>
</div>
</form>
</section>
</div>
</div>
<app-footer></app-footer>[enter image description here][1]
I suggest you looking for html table colspan (https://html.com/tables/rowspan-colspan/). With colspan you can merge two td cells. Take a look in the example below:
td {
width: 30px;
}
<table border="1">
<tr>
<td colspan="2">Merged</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Perhaps border-collapse: collapse; is what you’re missing?
td {
background: red;
color: white;
padding: 0.5em;
}
.t1 {
margin-top: 2em;
border-collapse: collapse;
}
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<table class="t1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
I would like to remove the white space between Table Title and Sub Titles.
Also Sub Title "Sub1" together with the icon should be left-aligned within the cell
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<span class="text-left">Sub1</span>
<span class="material-icons refresh-icon">refresh</span>
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td class="text-left">B</td>
<td>16.3%</td>
</tr>
<tr>
<td class="text-left">V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You need do with some css for remove that space
apply this css into ur css file margin-bottom: 0; will remove space from table-responsive and card title
.card-title{
background-color: #aed581;
padding: 15px;
font-weight: bold;
margin-bottom: 0;
}
.fa-repeat{
color: lightgray;
cursor: pointer;
}
and for icon i used font-awesome icon here is the CDN link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Here is the HTML
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<i class="fa fa-repeat"></i>
Sub1
<!-- <span class="material-icons refresh-icon">refresh</span> -->
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td>B</td>
<td>16.3%</td>
</tr>
<tr>
<td>V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You can edit or preview code here
When user click on any of the option(showOSpackage1,showOSPackage2), i want the content to be displayed on the right hand side. Right now when user click on showOSPackage1, the content is displayed on right side and even occupied the area on left side(table is displayed). Any inputs how can i make the content only visible on right side when user click on an option.
Please find the demo http://plnkr.co/edit/npfC9EiLtBMQCDs4M2I9?p=preview
sample code:
<div ng-controller="MainCtrl">
<div class="row">
<div class="vertical-menu;col-sm-3" style="width:20%;float:left;">
<a ng-click="toggle='ShowOsPackage1'" ng-class="{ 'active' : toggle === 'ShowOsPackage1' }">
showOsPackage1
</a>
<a ng-click="toggle='ShowOsPackage2'" ng-class="{ 'active' : toggle === 'ShowOsPackage2' }">
showOsPackage2
</a>
</div>
<div class="" ng-show="toggle === 'ShowOsPackage3'">
<h1>ShowOsPackage3</h1>
</div>
<div class="" ng-show="toggle === 'ShowOsPackage2'">
<h1>ShowOsPackage2</h1>
</div>
<div class="" ng-show="toggle === 'ShowOsPackage1'">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div>
<h2 style="text-align: center;">Table shown here</h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-1"> </div>
<div class="col-xs-8" style="width:80%;background: none;height: 660px;">
<table class="table table-scroll table-striped">
<thead>
<tr style="background-color: #cdd0d6;">
<th style="width:25%;white-space: nowrap;text-align: center;">Header1</th>
<th style="width:10%;white-space: nowrap;text-align: center;">Header1</th>
<th style="width:10%;white-space: nowrap;text-align: center;">Header3 </th>
</tr>
</thead>
<tbody style="width:95%;height:200px;overflow:auto;display:block;">
<tr>
<td style="width:25%;text-align: center;">
HEADER1 CONTENT
<td style="width:10%;text-align: center; ">
header2 content
</td>
<td style="width:10%;text-align: center;">
header3 content
</td>
</tr>
<tr>
<td style="width:25%;text-align: center;">
HEADER1 CONTENT
<td style="width:10%;text-align: center; ">
header2 content
</td>
try adding this css :
.options{
width: 20%;
float: left;
margin-top: 30px;
}
.colcontent {
width: 80%;
float: right;
}
Plus is your plnkr bootstrap isn't applied.
I have an html table on my website (emma-moore.com) that I'm using for layout instead of tabular data:
<table border="0" cellpadding="5px" width="100%" class="followFont">
<tbody>
<tr>
<td align="left">Follow your heart</td>
</tr>
<tr>
<td align="left" style="padding-bottom: 10px">and you'll always</td>
</tr>
<tr>
<td align="left">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</td>
</tr>
<tr>
<td align="left" style="padding-top: 10px">end up where your</td>
</tr>
<tr>
<td align="left">soul needs to be.</td>
</tr>
</tbody>
</table>
Best practice is not to use inline styles and tables for layout, and I'm wondering how to replace the table with a div block and put the text and the jpg inside the div block in such a way that the text and jpg display the same way as they do when using the table. How can I best do this with css and a div block?
Thanks,
William
.followFont
{
padding:5px;
border:0;
cellpadding:5px;
width:100%;
display:table;
}
<div class="followFont">
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">Follow your heart</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-bottom: 10px;">and you'll always</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
<img border="0" src="balloonsAndLavenderFields.jpg" width="99px" height="150px" class="homePictureFrame" />
</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left; padding-top: 10px;">end up where your</div>
</div>
<div style="display:table-row;">
<div style="width:100%; display:table-cell; text-align:left;">
soul needs to be.
</div>
</div>
</div>
Link:-https://html-cleaner.com/features/replace-html-table-tags-with-divs/
<h2>Phone numbers</h2>
<table width="300" border="1" cellpadding="5" style="text-align: center">
<tr>
<th width="75"><strong>Name</strong></th>
<th><span style="font-weight: bold;">Telephone</span></th>
<th> </th>
</tr>
<tr>
<td>John</td>
<td>0123 456 785</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
<tr>
<td>Cassie</td>
<td>9876 532 432</td>
<td><img src="images/check.gif" alt="checked" /></td>
</tr>
</table>
<h2>Phone numbers</h2>
<div class="rTable">
<div class="rTableRow">
<div class="rTableHead"><strong>Name</strong></div>
<div class="rTableHead"><span style="font-weight: bold;">Telephone</span></div>
<div class="rTableHead"> </div>
</div>
<div class="rTableRow">
<div class="rTableCell">John</div>
<div class="rTableCell">0123 456 785</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
<div class="rTableRow">
<div class="rTableCell">Cassie</div>
<div class="rTableCell">9876 532 432</div>
<div class="rTableCell"><img src="images/check.gif" alt="checked" /></div>
</div>
</div>
You can use
<div id="table" style="display: table;">
<div class="cell" id="cell1"></div>
<div class="cell" id="cell2"></div>
<div class="cell" id="cell3"></div>
</div>
You'll be using like table
Div can have the same properties as table
like
#table
{
vertical-align:middle;
text-align:center:
border:solid 1px #ddd;
width:100%;
}
.cell
{
display:table-cell;
vertical-align:middle;
text-align:center;
border:solid 1px #ddd;
width:25%;
padding:10px;
}
and soon....
Hope this helps
I have the following HTML table and there is a couple of problems with it. First the rows in the table are really large, the table row should be just large enough to fit the content inside of it. Second some of the inner divs are out of line with the rest of the divs in the row, in particular the ones that contains words that wrap onto a second line
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
<td rowspan="2" style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>
I figured out the answer. The rowspan is causing the problem and I had to remove the rowspan and use a negative margin on the second row instead.
<!DOCTYPE html>
<html>
<head>
<style>
.stopHoriz {
display:inline-block;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
.stopVertical {
margin-bottom:3px;
border: 1px solid black;
width:75px;
height:75px;
text-align:center;
font-size: .8em;
}
</style>
</head>
<body>
<table border="1">
<tr style="height:75px;">
<td colspan="2">
<div style="padding-right: 30px; vertical-align:top">
<div class="stopHoriz">Amusement</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Beaches</div>
</div>
</td>
</tr>
<tr>
<td rowspan="2" style="width:75px;">
<div style="padding-top: 30px">
<div class="stopVertical">Beaches</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Amusement</div>
</div>
</td>
<td>Main</td>
<td style="width:75px">
<div style="padding-bottom: 30px; vertical-align:top; margin-top: -83px">
<div class="stopVertical">Amusement</div>
<div class="stopVertical">State Park</div>
<div class="stopVertical">Zoo</div>
<div class="stopVertical">History</div>
<div class="stopVertical">Marine Encounters</div>
<div class="stopVertical">Onset</div>
<div class="stopVertical">Museum</div>
<div class="stopVertical">Beaches</div>
</div>
</td>
</tr>
<tr style="height:75px">
<td colspan="2">
<div style="padding-left: 30px">
<div class="stopHoriz">Beaches</div>
<div class="stopHoriz">Museum</div>
<div class="stopHoriz">Onset</div>
<div class="stopHoriz">Marine Encounters</div>
<div class="stopHoriz">History</div>
<div class="stopHoriz">Zoo</div>
<div class="stopHoriz">State Park</div>
<div class="stopHoriz">Amusement</div>
</div>
</td>
</tr>
</table>
</body>
</html>