<html>
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Titatoggle -->
<link href="titatoggle-dist.css" rel="stylesheet">
</head>
<body>
<table class="table table-striped table-bordered" style="width:70%">
<thead>
<tr>
<th>Fields</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Customer Info -->
<td width="40%">Name</td>
<td width="60%"> <input type="text" name="name" class="form-control" style="display:table-cell; width:100%" placeholder="Enter full name"></td>
</tr>
<tr>
</tr>
<tr>
<!-- NRO POC -->
<td width="40%">Address</td>
<td width="60%"> <input type="text" name="address" class="form-control" style="display:table-cell; width:100%" placeholder="Enter address"></td>
</tr>
<tr>
<!-- Customer organization -->
<td width="40%">Company</td>
<td width="60%">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="organization" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Customer Organiztion
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm not sure what is causing my first two rows of my bootstrap table(table-striped) to appear dark
Faulty Table Image
I couldn't figure out how to add my CSS files but I used the bootstrap template with this link: https://startbootstrap.com/template-overviews/sb-admin/. I had to remove the rest of the table to ensure data security but it didn't have this problem other than the first two rows of the table. Also, initially I didn't even have a table header row and the problem was still there. Thanks to anyone who can help its greatly appreciated.
The bootstrap table is using the first row as table head, hence it is bold. You can overwrite the this in CSS file by adding a different class to the element.
tr:first-child td {
background-color: #your_color;
}
or
tr:nth-child td {
background-color: #your_color;
}
Or maybe you are using .table-striped class to your table.
Related
Hello I have tried to make a table that has expenses, amount kai action but I have a problem with the alignment. I tried to correct it through the width but unfortunately it did not work.
What am I doing wrong?
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<a routerLink="/addexpense">Add Expense</a>
<div class="div1">
<label for="keyword">Search:</label>
<input type="text"
id="keyword"
[(ngModel)]="filters.keyword"
name="keyword"
(input)="listExpenses()">
</div>
<div class = "container">
<table class = "table table-striped table-bordered" >
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<div *ngFor ="let expense of expenses">
<tr>
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink ="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</div>
</table>
</div>
</body>
result :
Not to bind *ngFor to <div> element.
Instead, you need to bind *ngFor to <tr> element and remove <div> element from the <table>.
<table class="table table-striped table-bordered">
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<tr *ngFor="let expense of expenses">
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</table>
Sample Solution on StackBlitz
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
I'm trying to position a Bootstrap styled dropdown button for use with a table. I can get it so the container rows butt up, but then there is a visual gap between the button and the edge of the table. I'm trying to shrink that gap (to maybe 3 px?).
I've messed with absolute and relative positioning, but for some reason my brain just isn't getting it.
I quick put together this fiddle to help shown what I mean: https://jsfiddle.net/rbennett/emup7wpe/1/
<div class="container">
<div class="col-sm-12">
Trying to figure out how to correctly position a button for a table...
<br />
<br />
<div class="button-row">
<button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Items<span class="caret"></span>
</button>
<ul id="itemSelectorDropdown" class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<br />
<div class="other-row">
<table id="testTable" class="table table-bordered" cellspacing="0">
I have elements from a DatatTable table that sit right here<br />so I'm looking to position the "Items" button on the same line,<br />but aligned to the right.
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>qrs</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Can someone nudge me in the right direction on how to position the button so that it is right above the table (and not have a gap)?
I modified your html just a tiny bit. I moved the button just above the table.
I also added 1 rule to move the button.
.other-row {
outline: 1px solid blue;
}
#itemsButton{
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="col-sm-12">
Trying to figure out how to correclty position a button...
<br />
<br />
<div class="button-row">
<ul id="itemSelectorDropdown" class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<br />
<div class="other-row">
<button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Items<span class="caret"></span></button>
<table id="testTable" class="table table-bordered" cellspacing="0">
We want to see the "Items" button here (aligned to the right)
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>qrs</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
just change border-radius:0 in your button
#itemsButton
{border-radius:0;float:right;}
.other-row {
outline: 1px solid blue;
}
#itemsButton
{border-radius:0; float:right}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="col-sm-12">
Trying to figure out how to correclty position a button...
<br />
<br />
<div class="other-row">
<div class="button-row">
<button id="itemsButton" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Items<span class="caret"></span>
</button>
<ul id="itemSelectorDropdown" class="dropdown-menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
<table id="testTable" class="table table-bordered" cellspacing="0">
<thead>
<tr>
<th>Data1</th>
<th>Data2</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
<td>abc</td>
</tr>
<tr>
<td>qrs</td>
<td>123</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm not a web designer. I was trying to design a web layout with some scrollable columns which contains some data in the form of anchor tags which are loaded dynamically. I've designed a html table structure along with a style sheet to achieve this. Source code of this table is as shown below
<table>
<tr>
<!--COLUMN HEADERS -->
<td id="titles" style="width: 50%">
<b style="padding-left: 4%">CURRENCY</b>
<b style="padding-left: 9%">COUNTRY</b>
<b style="padding-left: 8%">SECTOR</b>
<b style="padding-left: 4%">LOCATION COUNT</b>
</td>
</tr>
<tr>
<td style="width: 50%">
<!--1st COLUMN TO HOLD COUNTRY NAMES -->
<div id="column">
<div ng-repeat="currency in allCurrencies">
<a href=""
ng-click="filterProductByCurrency(currency); filterCountryByCurrency(currency); filterSectorByCurrency(currency)">
<span ng-bind="currency"></span> <br>
</a>
<input type="hidden" name="currencyHolder" ng-model="selCurrency">
</div>
</div>
<!--2nd COLUMN TO HOLD CURRENCY NAMES -->
<div id="column">
<div ng-repeat="country in allCountries">
<a href=""
ng-click="filterProductByCountry(country); filterSectorByCurrAndCtry(country)">
<span ng-bind="country"></span> <br>
</a>
<input type="hidden" name="countryHolder" ng-model="selCountry">
</div>
</div>
<!--3rd COLUMN TO HOLD SECTOR NAMES -->
<div id="column">
<div ng-repeat="sector in allSectors">
<a href="" ng-click="filterProductBySectors(sector); filterLocBySectors(sector)"> <span
ng-bind="sector"></span> <br>
</a>
<input type="hidden" name="variantHolder" ng-model="selVariant">
</div>
</div>
<!--4th COLUMN TO HOLD LOCATION COUNT RANGE -->
<div id="column">
<div ng-repeat="locCount in locationRangeValues">
<a href="" ng-click="filterProductByRange(locCount)">
<span ng-bind="locCount"></span> <br>
</a>
</div>
</div>
</td>
</tr>
</table>
And the CSS styling for class coulmn is as shown below
#column {
background-color: #f5f5f5;
float: left;
width: 14%;
height: 125px;
overflow: auto;
overflow-y: scroll;
white-space: nowrap;
text-align: center;
}
And CSS styling for class for titles is as given below
#titles{
background-color: #f5f5f5;
color: #069;
fill: #069;
}
This works fine, but the issue with this setup is it's not responsive. I've interagted bootstrap within my application. Is there any way to make this setup more responsive using bootstrap? Please help.
To make any table responsive just place the table inside a <div> element and apply the class .table-responsive on it, as demonstrated in the example below:
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Row</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Biography</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Carter</td>
<td>johncarter#mail.com</td>
<td>Lorem ipsum dolor sit amet…</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Parker</td>
<td>peterparker#mail.com</td>
<td>Vestibulum consectetur scelerisque…</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Rambo</td>
<td>johnrambo#mail.com</td>
<td>Integer pulvinar leo id risus…</td>
</tr>
</tbody>
</table>
</div>
see working ex here
View this example. add bootstrap headers and responsive class to the divs
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<p>The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:</p>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
There are way to change the td to div by using jQuery and css but not easy and you need to write different css for every table in your application, for more detail see this
If you don't want to write css use RAHUL suggestion for scroll-able table for smaller screen by using bootstrap.
I have no idea of Bootstrap. Can you guide me how to make one table responsive. how to make this body responsive?
<body style="background-color:#F1F3F6 ">
<div align="center">
<h1 style="color:#0083CA;">
<img src="http://www.kerenel.com/img/banner" alt="Alternate Text" /><br />
Smart Pond
</h1>
<div id="currenttime" style="display:none;">
</div>
<table class="">
<tr>
<td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div></td>
<td><div id="ph-container" style="float:left;background-color:red"></div></td>
<td><div id="do-container" style="background-color:red"></div></td>
</tr>
</table>
Data recorded at Time : <span id="lblDate"></span>
</div>
</body>
The .table-responsive class creates a responsive table. The table will then scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aditya</td>
<td>Singhal</td>
<td>35</td>
</tr>
<tr>
<td>Indroneil</td>
<td>Krishnan</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
Read a Manual: Responsive tables
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.
You need to add the following classes:
table
table-responsive
Code
<table class="table table-responsive">
<tr>
<td><div id="water-temperature-container" style="float:left; min-height:400; background-color:red;" ></div></td>
<td><div id="ph-container" style="float:left;background-color:red"></div></td>
<td><div id="do-container" style="background-color:red"></div></td>
</tr>
</table>
Snippet
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-responsive">
<tr>
<td>
<div id="water-temperature-container" style="float:left; min-height:400; background-color:red;"></div>
</td>
<td>
<div id="ph-container" style="float:left;background-color:red"></div>
</td>
<td>
<div id="do-container" style="background-color:red"></div>
</td>
</tr>
</table>