I'm trying to add html tool-tips to an existing page that's made of a table on one side of the page and something else on the other. I want to add the tool-tip to each td in the table.
With the tool-tip added to each td every time I hover over a td the whole table shifts over one cell!
Also, tried only on chrome.
before the hover
And when I hover over the first td
Below is a cut down, but fully working example of the oddness, any thoughts appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="shortcut icon" href="static/img/favicon.ico" type="image/x-icon" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="table-responsive" id="23">
<TABLE class="table table-bordered table-nonfluid">
<tr id="hdr" class="bg-primary h5">
<th class="text-center">Mon 18 May</th>
<th class="text-center">Thu 21 May</th>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>300</sup>/<sub>312</sub>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
</TABLE>
</div>
</div>
<div class="col-md-6 " style="padding-top: 16px;">
<blockquote id="comment_txt">before, after and then on</blockquote>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
</body>
</html>
I suggest to wrap the content of your td inside a span like this
<td><span data-trigger="hover" style="display:block"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"><sup>300</sup>/<sub>312</sub></span></td>
Is never a good idea using the tooltips directly on a table element.
Well this is a weird issue actually. Never realised it until now. This might not be the perfect fix but a temporary fix will be to place a span around the text in the td for the one on the left and for the td on the right leave it as it is right now because it works fine only the left one causes this issue.
Bootply Link right here
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="table-responsive" id="23">
<TABLE class="table table-bordered table-nonfluid">
<tr id="hdr" class="bg-primary h5">
<th class="text-center">Mon 18 May</th>
<th class="text-center">Thu 21 May</th>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger" >
<span data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="WHAT!"
data-toggle="tooltip">
<sup>300</sup>/<sub>312</sub>
</span>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
<tr id="day" class="text-center">
<td class="bg-danger" >
<span data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="WHAT!"
data-toggle="tooltip">
<sup>300</sup>/<sub>312</sub>
</span>
</td>
<td class="bg-danger"
data-trigger="hover"
data-placement="auto"
data-html="true"
data-title="<div>WHAT!</div>"
data-toggle="tooltip"
>
<sup>277</sup>/<sub>312</sub></td>
</tr>
</TABLE>
</div>
</div>
<div class="col-md-6 " style="padding-top: 16px;">
<blockquote id="comment_txt">before, after and then on</blockquote>
</div>
</div>
</div>
The problem with my fix is simple. The tooltip will only show on the left td if you hover on the text in the cell not on the table-cell itself whilst the tooltip will show if you hover on the table cell on the right. bad for user experience I know but this is as i said a temporary fix.
Related
Have a question about the HTML view related to the table.
In my HTML view, I have a table.
This is worked in a responsive way when changing the view.
Here I want to change the view that the responsive view comes with a scroll bar.
I want to change it to fit all columns to the view and wrap the column contents.
Any suggestions to do it?
<div class="col-md-12 col-sm-12 grid-margin stretch-card">
<div class="card shadow-card-l">
<div class="card-body">
<center><h4 class="card-title">Task Related Documents</h4></center>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Document Type</th>
<th>Document Note</th>
<th>File Name</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.TaskFilesHistoryViewModel.OrderByDescending(x => x.Id))
{
<tr class="even pointer">
<td>#item.File_Type</td>
<td>#item.Note</td>
<td>#item.File_Name</td>
<td>
<a href="#Url.Action("DownloadTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-info ti-import" />
<a href="#Url.Action("RetrieveTaskImage","Ajax", new { id = item.Id})" target="_blank" rel="publisher tag" class="btn btn-outline-success fa ti-eye" />
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
I am currently having two main currencies for my business. The product page is actually built using HTML. I have 4 products in a page and I want to display two prices for each product, like if someone selects USD, cost in USD will be displayed and if someone selects EUR then it'll show the price accordingly, without reloading the page. I also want the order link to be changed upon selecting the currency.
Please I don't want to convert the currency. I just want to store two different price values for each product and display it accordingly when user changes the currency.
It's NOT any CMS based or eCommerce website, just few HTML pages. I think it's it can be done using JS but I am not a programmer :/
Would anyone please tell me how to do it? I need a very simple program but I have no idea where to start.
Here's product pricing section HTML source code-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Website Hosting | Host Hub</title>
<!--Favicon-->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png"/>
<!--Libraries-->
<link rel="stylesheet" type="text/css" href="assets/libraries/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/font-awesome/css/all.min.css">
<link rel="stylesheet" type="text/css" href="assets/libraries/animate/animate.min.css">
<!--Google Fonts-->
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Overlock:400,400italic,700,700italic,900,900italic">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Signika:300,400,600,700">
<!--Styles-->
<link rel="stylesheet" type="text/css" href="assets/css/style.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/mobile.min.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Begin Header-->
<div class="topbar">
<div class="container">
<div class="row">
<!--Begin Social Icons-->
<div class="col-xl-4 col-lg-4 col-md-3 col-sm-3 col-12 social">
<div class="link"><i class="fab fa-facebook"></i></div>
<div class="link"><i class="fab fa-twitter-square"></i></div>
<div class="link"><i class="fab fa-youtube-square"></i></div>
<div class="link"><i class="fab fa-skype"></i></div>
</div>
<!--End Social Icons-->
<!--Begin Client Links-->
<div class="col-xl-8 col-lg-8 col-md-9 col-sm-9 col-12 text-right client">
<div class="link xshide"><i class="fas fa-coins"></i>$ USD</div>
<div class="link xshide"><i class="fas fa-globe"></i>Language</div>
<div class="link"><i class="fas fa-lock"></i>Customers</div>
<div class="link"><i class="fas fa-life-ring"></i>Support</div>
<div class="link"><i class="fas fa-shopping-cart"></i><span class="desktop">View Cart</span> (0)</div>
</div>
<!--End Client Links-->
</div>
</div>
</div>
<!--End Header-->
<!--Begin Web Hosting-->
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Micro Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $2<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>1 GB Storage</td>
</tr>
<tr>
<td>10 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Small Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $7<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>10 GB Storage</td>
</tr>
<tr>
<td>100 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wow zoomInDown" data-wow-delay="0.4s">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">Big Hub</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1> $9<span class="subscript">.99</span></h1>
<small>Per Month</small> </div>
<table class="table">
<tr>
<td>20 GB Storage</td>
</tr>
<tr>
<td>200 GB Bandwidth</td>
</tr>
<tr>
<td>Unlimited Email</td>
</tr>
<tr>
<td>Unlimited Databases</td>
</tr>
<tr>
<td>Unlimited FTP Accounts</td>
</tr>
<tr>
<td><img alt="" src="assets/img/hosting/website-hosting/cpanel.png" srcset="assets/img-retina/hosting/website-hosting/cpanel#2x.png 2x" class="img-fluid" /></td>
</tr>
</table>
</div>
<a href="#">
<div class="panel-footer">Order Today</div>
</a> </div>
</div>
<!--End Plan Box-->
</div></div></div>
<!--Libraries-->
<script src="assets/libraries/jquery/jquery.min.js"></script>
<script src="assets/libraries/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/libraries/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/libraries/wow/wow.min.js"></script>
<script src="assets/libraries/zumada/sticky-header.min.js"></script>
<script src="assets/libraries/zumada/dropdown-menu.min.js"></script>
<script src="assets/libraries/zumada/price-slider-6-plans.min.js"></script>
<script src="assets/libraries/zumada/scroll-to-top.min.js"></script>
<script src="assets/libraries/zumada/countdown.min.js"></script>
<!--Custom Scripts-->
<script src="assets/js/scripts.js"></script>
</body>
</html>
I was not patient enough to wait for your HTML and simply built this "mvce" (minimum viable and complete example).
There are many ways of providing the two prices. I chose the way via the data attribute in the price <td>s.
const tbl=document.querySelector("table");
let cur=0; // possible values: 0 and 1
const change=()=>{
tbl.querySelectorAll(".price").forEach(td=>td.textContent=td.dataset.pr.split(" ")[cur]);
cur=1-cur;
}
document.querySelector("button").onclick=change;
change()
.price {text-align:right}
<table>
<tr><th>nr</th><th>Fruit</th><th>Price</th></tr>
<tr><td>1</td><td>Apple</td><td class="price" data-pr="1€ 1.2$"></td></tr>
<tr><td>2</td><td>Orange</td><td class="price" data-pr="10€ 12$"></td></tr>
<tr><td>3</td><td>Banana</td><td class="price" data-pr="2€ 2.4$"></td></tr>
<tr><td>4</td><td>Pineapple</td><td class="price" data-pr="5€ 6$"></td></tr>
<tr><td>5</td><td>Apricot</td><td class="price" data-pr="7€ 8.3$"></td></tr>
<tr><td>6</td><td>Pear</td><td class="price" data-pr="3€ 3.6$"></td></tr>
</table>
<button>change currency</button>
And here is another sample, based on your HTML (I added the `data-pr="24.95 20.80" attributes):
let cur=1;
document.querySelector("button").onclick=()=>{
document.querySelectorAll(".the-price h1").forEach(h=>{
let p=h.dataset.pr.split(" ")[cur].split(".");
h.innerHTML=['$','€'][cur]+p[0]+'<span class="subscript">.'+p[1]+'/m</span>';
});
cur=1-cur;
}
.subscript {font-size:1ex}
<div class="webhosting">
<div class="container">
<div class="row">
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown">
<div class="panel">
<div class="panel-heading" style="background: #03989e">
<a name="pricing"></a>
<h3 class="panel-title">NVMe-1</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="11.95 9.50"> $11<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=77">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
<!--Begin Plan Box-->
<div class="col-xl-3 col-lg-3 col-md-6 col-sm-6 col-12 wowzoomInDown" data-wow-delay="0.2s">
<div class="panel">
<div class="panel-heading" style="background: #38b6ff ">
<h3 class="panel-title">NVMe-2</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1 data-pr="24.95 20.80"> $24<span class="subscript">.95/m</span></h1>
<small>Per Monthly</small> </div>
<table class="table">
<tr>
<td>Product Description 1</td>
</tr>
<tr>
<td>Product Description 2</td>
</tr>
</table>
</div>
<a href="{$WEB_ROOT}/cart.php?a=add&pid=78">
<div class="panel-footer">GET STARTED TODAY</div>
</a> </div>
</div>
<!--End Plan Box-->
</div>
</div>
</div>
<button>change currency</button>
You can do this easily by using Javascript. You can store the pricing in a JS function and return the actual amount stored when currency is changed without reloading the page.
If I could see your page source code, I would be able to help you resolve this better.
HTML/CSS Solution
No JavaScript Needed
Points to Consider Before Saying, "It Doesn't Work"
The OP (Original Post) had too much HTML to be considered very useful. A typical Bootstrap layout consists of <div>s heavily burdened by BS (Bootstrap) classes wrapped around more of the same.
The majority of the HTML is removed and only what is needed has been replaced by more semantic elements. Most importantly, the interactive element <a> was replaced by a <input type='checkbox' hidden> and a <label>. There are a few good reasons for this particular change:
Checkboxes are in one of two states checked = true or checked = false. The CSS pseudo-class :checked will change the style of the <label>, and all of the <figure> following it as well as the <sup> nested within each <figure>. When in default, (checked = false) everything is USD and when checked is changed to EUR.
Ascetically, the <label> can be styled to look like a <button>, <a>, etc. and the checkbox is actually has the hidden attribute. Since the checkbox has id='currency' and the <label> has for='currency' any click to the <label> is a click to the checkbox as well (and vise versa although it doesn't matter in this case since the checkbox is hidden).
Important: The HTML layout should not be altered in a way wherein one or more elements are placed between checkbox and <label> or inserted into any <figure>. There shouldn't be a problem about adding anything around, ahead, or behind them.
All <link> (except the Google Fonts) pointed to relative paths (ex. href='/path/to/style.css') making them useless. I added the BS classes have styles that have a high specificity that can't be overridden easily. I added the BS CSS and then doubled up the classes of the custom CSS to increase their specificity in order to override BS CSS.
Important: The only thing that can be changed are the name of the classes and any CSS property/value with one exception which is content:. If the CSS is placed in a file (ex. style.css), make sure the CSS rule sets are the last ones. If placed in a <style>, make sure the CSS rule sets are the last ones.
The dynamically changing text relies on the following:
:checked + label::before changes {content: '💲USD';... to '\a0€ EUR'
:checked ~ figure::before changes {content: '💲'attr(data-usd)... to €attr(data-eur) for all <figure>s that follow the checkbox.
:checked ~ figure > sup::before changes {content: '.'attr(data-usd)... to '.'attr(data-eur) for all <sup>
Since there's no JavaScript involved, the values are stored on each <figure> and <sup> data-usd and data-eur attributes and must be manually edited (which is what OP requested if I recall)
:checked ~ figure::before {content: '€\a0'attr(data-eur);...}
<input type='checkbox' checked hidden>
<label>€ EUR</label>
...
<figure data-usd='9' data-eur='12'>
€ 12<sup data-usd='99' data-eur='33'>.33</sup>
</figure>
label.money.money {
font-size: 2.5ch;
font-weight: 700;
line-height: 1;
cursor: pointer;
}
label.money.money::before {
content: '💲USD';
}
#currency:checked+label.money.money::before {
content: '\a0€ EUR';
}
figure.price.price {
width: max-content;
font-size: 4.75ch;
font-weight: 500;
line-height: 1.33;
}
figcaption.caption.caption {
width: 100%;
font-size: 0.3em;
padding: 0 0 0 1.5em;
}
sup.cents.cents {
vertical-align: middle;
font-size: 0.6em;
line-height: 0.7;
margin-left: -.75ch;
}
figure.price.price::before {
content: '💲'attr(data-usd);
}
sup.cents.cents::before {
content: '.'attr(data-usd);
}
#currency:checked~figure.price.price::before {
content: '€\a0'attr(data-eur);
padding-left: 0.3em;
}
#currency:checked~.price>sup.cents.cents::before {
content: '.'attr(data-eur);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<input id='currency' class='btn-click' type='checkbox' hidden>
<label class='money btn btn-link btn-lg' for='currency'></label>
<figure class='price' data-usd='2' data-eur='4'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='7' data-eur='13'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
<figure class='price' data-usd='9' data-eur='16'>
<sup class='cents' data-usd='99' data-eur='33'></sup>
<figcaption class='caption'>Per Month</figcaption>
</figure>
</body>
</html>
This has been bugging me a lot and when I try to google anything related to the subject, all I get is Stack Overflow questions about vertical-align not working on divs or similar elements.
I have this HTML table where as you can see, I set the style of each td to vertical-align:middle through an HTML inline style attribute:
<div ng-hide="getShoppingCart().length===0" class="col-md-10 col-md-offset-1">
<table class="table table-striped">
<tr>
<th class="col-md-2"></th>
<th class="col-md-3">Name</th>
<th class="col-md-2">Size</th>
<th class="col-md-2">Price</th>
<th class="col-md-2">Quantity</th>
<th class="col-md-1"></th>
</tr>
<tr ng-repeat="article in getShoppingCart()" style="height:120px;">
<!-- Image -->
<td class="col-md-2" align="center" style="vertical-align:middle;">
<img ng-src="{{article.media.images[0].smallHdUrl}}" class="img-responsive" style="height:120px;" >
</td>
<!-- Name -->
<td class="col-md-3" style="vertical-align:middle;">
<p>{{ article.name }}</p>
</td>
<!-- Size -->
<td class="col-md-2" style="vertical-align:middle;">
<p>{{ article.unit.size }}</p>
</td>
<!-- Price -->
<td class="col-md-2" style="vertical-align:middle;">
<p>£ {{ getTotalPriceForArticle($index) | number : 2 }}</p>
</td>
<!-- Quantity -->
<td class="col-md-2" style="vertical-align:middle;">
<button class="btn minusButtons" ng-click="decrementQuantity(article, $index)">–</button>
<input type="number" class="form-control" style="position:relative;top:2px;width:4vw;display:inline-block;" ng-model="getQuantities()[$index]"/>
<button class="btn plusButtons" ng-click="incrementQuantity(article, $index)">+</button>
</td>
<td class="col-md-1" align="left" style="vertical-align:middle;">
<button ng-click="removeArticleAtIndex($index)" class="btn redButtons" style="margin-left:0;">
<span class="glyphicon glyphicon-trash"></span>
</button>
</td>
</tr>
</table>
<div class="col-md-12" style="font-size:2vw; text-align:right;">
Total Price: £ {{ getTotalPrice() | number : 2 }}
</div>
So naturally I thought I could remove all of these inline styles and add this global rule in my external CSS file:
td {
vertical-align: middle;
}
But when I do that, the contents of the table's cells stop being aligned to the middle. I'm sure that the CSS file is properly linked as other elements are clearly affected by it. Also I checked the rest of the CSS and there are no other rules with higher priority overriding this property for this table. Any ideas?
Note: As you can probably figure out from the code, I'm using AngularJS and the table rows are being generated using ng-repeat, in case it could have something to do with the problem.
It's due to bootstrap overriding this with a higher specificity. This is what I see in the chrome developer console for td's:
.table>tbody>tr>td {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid #ddd;
}
I would recommend doing something like the following:
.table.td-vertical-center>tbody>tr>td {
vertical-align: middle;
}
Then in your table element you can do this:
<table class="table table-striped td-vertical-center">
This will allow you to wrap this style in a custom class that will not override bootstrap by default, as well as give it enough specificity to update the table cells.
You can see a working example of a bootply here
Try this
td, th {
vertical-align: middle !important;
}
So, I have a bootstrap table:
<table class="table">
<tr class="content-row" id="content_1">
<td><a id="more_1" class="more" role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="collapseExample">More</a>
</td>
</tr>
<tr class="collapse additional-row" id="additional_row1">
<td class="additional-row-td">Content</td>
</tr>
</table>
When I collapse the row, it just appears below the row, where the 'More' link is. But I need the animation to be present. I also tried to add transition to css rule, but it seems it doesn't have any effect. Is there any way to make collapsing with animation?
The answer that was given wasn't actually providing the correct solution. It was a solution, but when you need to keep the tr and td elements this solution is more complete
The fact is that there is no way in bootstrap to animate tr td elements.
What you can do is instead of toggling the tr or td is create a div or span element in which you are going to add all of your content and then there animate the element.
As you can see it looks the same as if you had an actual table
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>
<table class="table">
<tr class="content-row" id="content_1">
<td><a id="more_1" class="more" role="button" data-toggle="collapse" href="#additional_row1" aria-expanded="false" aria-controls="collapseExample">More</a>
</td>
</tr>
<tr>
<td class="additional-row-td">
<div class="collapse additional-row" id="additional_row1">Content</div>
</td>
</tr>
</table>
It seems like bootstraps collapse-animation isn't working with tables.
You could fix this issue by using divs instead, like i did here:
HTML:
<div class="table">
<div class="content-row" id="content_1">
<div><a class="more" id="more_1" role="button" aria-expanded="true" aria-controls="additional_row1" href="#additional_row1" data-toggle="collapse">More</a>
</div>
</div>
<div class="collapse additional-row" id="additional_row1">
<div class="additional-row-td">Content
</div>
</div>
CSS (just style it to look like an table):
.content-row{
padding: 10px 15px;
}
.additional-row-td {
border-top: 1px solid #dddddd;
padding: 10px 15px;
}
Working Example: http://www.bootply.com/iFOT9utPvA#
I have this sample:
link
CODE HTML:
<table class="table prospects-table">
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Email</th>
<th width="200">Phone</th>
<th width="200">Message</th>
<th width="200">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td width="200">test sdada</td>
<td width="200">asdsada#yahoo.com</td>
<td width="200">(321) 312-3123</td>
<td width="200"> sadasda</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
<tr>
<td width="200">Diaconescu Cristian</td>
<td width="200">asdsadsa#busteco.rh</td>
<td width="200">(312) 312-3123</td>
<td width="200">asdasadsdasasasasdkhsdjkashsdkjahdhjsgdhjgvhhs,ajfkghjkdjhdsgjhasdghjgsadhjgshjkhvjgjkgfkjhdkjjhgfhjkdhkjsgdfv</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
</tbody>
</table>
I want each column of my table to have a width of 200px.
I added this code to each td but does not work ...
<td width="200">test sdada</td>
Probably something simple but I realize why this code does not work.
Can you tell me please what is the problem and how to solve it?
Thanks in advance!
Why don't you just add a style tag to your code?
In the head just insert this:
<style>
td,th {width:200px}
</style>
Add table-layout: fixed; to your table
table{
table-layout: fixed;
}
Updated codepen
use this
<td style="width: 200px;">test sdada</td>
learn proper css take a loot at element level css here
you can add css :
style="width:200px";
DEMO HERE
try this one
<td width="70%">JXXXXXX</td>
hope this one help you
Width attribute is deprecated one. So it is better to use css width property instead.
Usage Note: Do not use this attribute, as it has been deprecated and
the rules should be defined and styled using CSS. Use the CSS property
width instead. - MDN
td, th {
width: 200px;
}
width of td doesn't work at HTML5,
use CSS styles instead , for example in simplest way
<style type="text/css">
.tdw{
width:200px;
}
</style>
<td class="tdw">Diaconescu Cristian</td>