When I am using
.right-align {
text-align: right !important;
transform: translateX(-40%);
}
The Table structure is showing below
<table>
<thead>
<tr>
<th>Bid
</th>
<th>Offer
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="right-align">
200
</div>
</td>
<td>
<div class="right-align">
221
</div>
</td>
</tr>
</tbody>
</table>
The td is overlapping the th element as seen below
How can I can make it go under the header ?
This is happening when table is scrolling
It is very hard to answer the question as it is, however, the table should keep its proportions and structure as long as you keep the code tight:
.right-align {
text-align: right !important;
}
<table>
<thead>
<tr>
<th>Bid</th>
<th>Offer</th>
</tr>
</thead>
<tbody>
<tr>
<td class="right-align">200</td>
<td class="right-align">221</td>
</tr>
</tbody>
</table>
It is nebulous why you decided to use the transform: translateX(-40%); rule in there, but it seems you may be trying to overwrite some rules that come from a theme hence the problem you are facing; If you update your question and add more pieces of code or at least what you are trying to achieve then i could be more helpful :). Also if you are using a framework or theme specify which one.
EDIT.
I saw your updates, you don't need to add a div within the td element to apply a class, you can do it directly in the td element. However, it seems that some css rules are overlapping. Maybe a screenshot of the results in a browser could be helpful.
Related
There are several questions on SE about this issue in Bootstrap 3, which have been solved by adding a custom class. Bootstrap 4 includes a text-truncate class to limit the display of text inside an element. We've used it in parts of the site without issue.
However, it doesn't work when applied to a table cell. Here's what we tried - in reality, there are multiple columns to the table but I've trimmed it down to one.
<table class="table table-striped table-bordered table-hover table-hover-cursor" id="tblData">
<thead class="thead-light">
<tr>
<th scope="col" data-bind="tableSort: { arr: _data, propName: 'text()'}">Text</th>
</tr>
</thead>
<tbody data-bind="foreach: pagedData">
<tr>
<td data-bind="text: text()" class="text-truncate"></td>
</tr>
</tbody>
</table>
There are various other question about this which suggest you need to put the text inside a span to have it work. But this doesn't work either.
<tr>
<td>
<span data-bind="text: text()" class="text-truncate"></span>
</td>
</tr>
I've also tried moving the class to the td and having it on both the td and the span. None of it works.
Another common suggestion is to add the text class. Although that doesn't seem to be a default class in Bootstrap. This doesn't work either.
<tr>
<td>
<span data-bind="text: text()" class="text text-truncate"></span>
</td>
</tr>
Again, moving or duplicating the class on the td doesn't make any difference. I wasn't sure if a size limitation might be needed so I tried this:
<tr>
<td data-bind="text: text()" class="col-md-2 text-truncate"></td>
</tr>
But still the text is displayed in full with no elipsis.
In all cases I've check the element to make sure it's picking up the text-truncate class and that the styles are being applied, and they are.
This does work:
<tr>
<td data-bind="text: text()" class="text-truncate" style="max-width: 200px"></td>
</tr>
But I'd prefer to stick to Bootstrap classes. What's the correct set of elements and classes to get this to work?
AFAIK there isn't a Bootstrap class that will solve this if the table columns have fluid width. The simplest solution is to use:
.table {
table-layout: fixed;
}
https://www.codeply.com/go/NysJfvWtst
I have the following code to display comparison of items
<table>
<tr> <!-- Iterating over list of Headers -->
<td>
<div class="Header"><h4>Header Value</h4></div>
<div class="HeaderList"><span>Key</span> <!-- Iterating over list of keys-->
</td>
<td> <!-- Iterating over multiple items -->
<div class="Header"></div>
<div class="HeaderList"><span>Value</span> <!-- Displaying Value next to the key by iterating over them-->
</td>
</tr>
</table>
I want to align the divs with class "Header" and "HeaderValueList" across multiple td.
The value in Header can extend to multiple lines if needed.
I want to set a maximum height for "HeaderKeyList" and "HeaderValueList" not to cross 32px but if its less than that, the height should be dynamically variable and should align across tds.
I have the following css
.HeaderList
{
width:100%;
height:auto;
max-height:32px;
overflow: hidden;
padding-top: 0.5px;
padding-bottom: 0.5px;
}
.Header
{
width:100%;
}
When any of the value spans across multiple rows, my alignment goes awry. Please help. I am open to making changes in javascript as well.
Thanks in advance.
To group rows in a table together, you use tbody. One tbody for each of the lists. So the HTML becomes
<table>
<thead>
<tr>
<th></th>
<th>Item1</th>
<th>Item2</th>
</tr>
</thead>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value1</th><td></td><td></td>
</tr>
<tr>
<td><div class="HeaderKey">Key1</div></td>
<td><div class="HeaderValue">Item1Value1</div></td>
<td><div class="HeaderValue">Item2Value1</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key2</div></td>
<td><div class="HeaderValue">Item1Value2</div></td>
<td><div class="HeaderValue">Item2Value2</div></td>
</tr>
<tr>
<td><div class="HeaderKey">Key3</div></td>
<td><div class="HeaderValue">Item1Value3</div></td>
<td><div class="HeaderValue">Item2Value3</div></td>
</tr>
</tbody>
<tbody>
<!-- Iterating over list of Headers -->
<tr class="Header">
<th>Header Value2</th><td></td><td></td>
etc, with this result:
See fiddle.
I made one of the values a bit wider, to demonstrate that if you make the window narrower, the div will grow to two lines, and the cells to the left and right will remain lined up (vertically centered; but you can change that) and if you make the window narrower still, the div doesn't grow to more than two lines because of the max-height.
Hi am trying to add a div above every <tr> but when i look at the html console the div are showing outside the table. below is the html code.
<table>
<div>
<tr><td></td></tr>
</div>
<div>
<tr><td></td></tr>
</div>
</table>
Is this not allowed? any help would be great.
<div> tag can not be used above <tr> tag. Instead you can use <tbody> tag to do your work. If you are planning to give id attribute to <div> tag and doing some processing, same purpose you can achieve through <tbody> tag. <div> and <table> are both block level elements. so they can not be nested.
For further information visit this page
For example:
<table>
<tbody class="green">
<tr>
<td>Data</td>
</tr>
</tbody>
<tbody class="blue">
<tr>
<td>Data</td>
</tr>
</tbody>
</table>
secondly, you can put "div" tag inside "td" tag.
<table>
<tr>
<td>
<div></div>
</td>
</tr>
</table>
Further questions are always welcome.
You can't put a div directly inside a table but you can put div inside td or th element.
For that you need to do is make sure the div is inside an actual table cell, a td or th element, so do that:
HTML:-
<tr>
<td>
<div>
<p>I'm text in a div.</p>
</div>
</td>
</tr>
For more information :-
http://css-tricks.com/using-divs-inside-tables/
No, you cannot insert a div directly inside of a table. It is not correct html, and will result in unexpected output.
I would be happy to be more insightful, but you haven't said what you are attempting, so I can't really offer an alternative.
You can not use tag to make group of more than one tag. If you want to make group of tag for any purpose like in ajax to change particular group or in CSS to change style of particular tag etc. then use
Ex.
<table>
<tbody id="foods">
<tr>
<td>Group 1</td>
</tr>
<tr>
<td>Group 1</td>
</tr>
</tbody>
<tbody id="drinks">
<tr>
<td>Group 2</td>
</tr>
<tr>
<td>Group 2</td>
</tr>
</tbody>
</table>
In the html tables, <table> tag expect <tr> tag right after itself and <tr> tag expect <td> tag right after itself. So if you want to put a div in table, you can put it in between <td> and </td> tags as data.
<table>
<tr>
<td>
<div>
<p>It works well</p>
</div>
</td>
</tr>
<table>
If we follow the w3 org table reference ,and follow the Permitted Contents section, we can see that the table tags takes tbody(optional) and tr as the only permitted contents.
So i reckon it is safe to say we cannot add a div tag which is a flow content as a direct child of the table which i understand is what you meant when you had said above a tr.
Having said that , as we follow the above link , you will find that it is safe to use divs inside the td element as seen here
A div cannot be added inside tr but there's an alternate solution here.
I tried adding a div inside tr but it seems a td should be the immediate child of a tr for it to work properly.
Adding a div inside td works fine.
I suppose you are trying to add some background or border-radius for the whole tr. Here's how I achieved the similar result in my project.
I'm using colspan and flex property to achieve that.
.flex-container{
display: flex;
margin: 5px;
}
table{
border: 1px solid red;
}
tr{
border: 1px solid green;
padding: 5px;
}
.flex-container .col{
box-sizing: border-box;
border: 1px solid;
padding: 5px;
border-radius: 5px;
margin: 5px;
background: skyblue;
}
<table>
<tr>
<!-- Assuming you have 4 columns -->
<td colspan="4">
<div class="flex-container">
<div class="col"> Item 1 </div>
<div class="col"> Item 2 </div>
<div class="col"> Item 3 </div>
</div>
</td>
</tr>
</table>
The problem will happen whenever it will render on small device. Element <div> inside <td> will occurs in mobile responsive screen.
You could use display: table-row-group for your div.
<table>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
<div style="display: table-row-group">
<tr><td></td></tr>
</div>
</table>
I have small generic table which looks something like this:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
I want to be able to click on each table data to expand additional information. Can I do this using only css or do I have to resort to javascript?
You probably will want javascript (and definitely will if you intend the item to stay open after being clicked). But to demonstrate there are instances where it can be done purely with CSS, this will work in CSS3 browsers (only while holding down the mouse button).
See the fiddle.
HTML
<table>
<tr>
<td>1<div>More info on 1</div></td>
<td>2<div>More info on 2</div></td>
</tr>
<tr>
<td>1<div>More info on 1</div></td>
<td>2<div>More info on 2</div></td>
</tr>
</table>
CSS
td {
vertical-align: top;
}
td > div {
height: 0;
overflow: hidden;
}
td:active > div {
height: auto;
}
I don't think you can achieve this with css.
But with jQuery's slideToggle(), it's a piece of cake!
I want to put a background image in only 1 cell of the table. When I'm specifying in table tag or in 'style' background is being applied to whole screen. Is it possible to specify different local images to different cells in a table using only html?
Relevant HTML (from comment by the OP):
<table align="center" height=501 border=2>
<tr>
<td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
Apple pie s</td>
<td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
</tr>
</table>
<table style="width: 100%; height: 300px; ">
<tr>
<td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
<td>CELL TWO</td>
</tr>
</table>
Ways to apply the style:
Inline style (usually not the preferred method)
Class selector
CSS2/3 hierarchy selector or pseudo-class
ID selector
Simply use inline CSS on the <td> element of the cell.
For example:
<td style="background: url(/resources/images/background.png);">
Specify your background (using style attribute) for <td> tag (or <th> tag)
You have to specify it to the cell (td tag), not to whole of table.
do it like this:
<tr><td style="background-image:url('yourPath')"></td></tr>
HTML:
<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr>
<td class="cell">Cell 1</td>
<td id="cell">Cell 2</td>
<td style="background-color: yellow">Cell 3</td>
<tr>
</table>
CSS:
.cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
#cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
Preview here: http://jsfiddle.net/384An/
With CSS there are two ways, assign an id to the cell:
#tableCellID {
background-image: url(path/to/image.png);
}
Or use nth-child:
tbody tr:nth-child(2) td:nth-child(3) {
background-image: url(path/to/image.png);
}
Combining both approaches in one JS Fiddle demo.
If you must use in-line styles (and I heartily recommend avoiding this if you can):
<td style="background-image: url(path/to/image.png);">...</td>
Or, possibly (but it's deprecated):
<td background="path/to/image.png">...</td>
But, please note that I do not recommend, or support, using either of these approaches. Certainly the final approach is horrible, but if it's the only approach you can take then...just don't tell me you used it. It's horrible, and it'll keep me awake for days feeling guilty.
Updated the previous JS Fiddle demo.