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.
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
When I'm adding tr rows to an existing tbody, the table's width "magically" changes - why is that so / how to prevent that?
My HTML:
<table class="table table-hover table-sm" style="width: 50%">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Info</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
This table resides within a Bootstrap Grid column (within a fluid container, if that matters). In the beginning the table fills 50% of the width of the grid column, after adding rows via JavaScript the table's width changes and even outgrows the grid resulting in a bad design.
Add this class to your table
.is-breakable {
word-break: break-word;
}
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.
My table has a nested table for one of its rows. I would like both tables to take up 100% of the parent element width. How do I do that?
Demo
HTML
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
Drawing on the other answers, in a roundabout way, yes they do have an element of correctness, unfortunately none of them has the full story.
As Justinas points out, you're not nesting tables, what you're nesting are rows. While row nesting will indeed work, it is actually now not supported under the new HTML5 schemes.
This means that trying to do what you're doing, will simply not validate, and worse will refuse to render correctly on mobile devices.
Working with your existing code:
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
You can achieve what you're trying to do by adding a width of 100% to the table's style as others have already pointed out, and by adding a width:100% to requestDetailsHeading class.
However, I'm going to take a guess here, and looking at your other class names (specifically container and row) I suspect you might actually be using the Bootstrap CSS framework. If you're not then perhaps you might want to consider doing so, as it will make the task you're trying to do much easier and you'll have less fiddling about to do.
You can download the various CSS files from
http://getbootstrap.com/
And once you have a page set-up with BS in place, you can get the exact effect you want by using the following HTML
<div class="container">
<table class="table">
<tr> <!-- NOTE: Don't use the 'row' class here as BS3 has another use for that -->
<td colspan="3">
row 1
</td>
</tr>
<tr class="requestDetailsHeading">
<td colspan="3">HeadingName</td>
</tr>
<tr class="requestRow">
<td>Name</td>
<td>Date</td>
<td>Age</td>
</tr>
<tr class="requestData">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
Even without bootstrap added however, you'll notice that I've simplified the HTML.
To get the effect you're looking for of a 100% row, above each row of data, you don't need to nest things the way you did, you simply just need to tell the td element how many columns it has to span, and as long as that is equal to the rest of the table, you'll end up with a 100% width header across separate columns. If you decide to use Bootstrap, then BS will take care of giving you a 100% table width, otherwise as others have mentioned simply add a width of "100%" to a class that controls the table itself.
Additional (But not required to solve your problem)
If you decide to use Bootstrap as your CSS framework, there is another way that you can achieve what you're trying to achieve, and that's to use the BS3 grid system.
Using 'container' s, 'row' s and 'col-md-xx' style classes, you could very easily do something like the following:
<div class="container">
<div class="row">
<div class="col-md-12">
Row Header Text Goes Here
</div>
</div>
<div class="row">
<div class="col-md-4">Name</div>
<div class="col-md-4">Date</div>
<div class="col-md-4">Age</div>
</div>
<div class="row">
<div class="col-md-4">gg</div>
<div class="col-md-4">dd</div>
<div class="col-md-4">ee</div>
</div>
</div>
Because of the way Bootstrap works, the container will automatically take up 100% of the center column (approx 1024 pixels) and each of your rows will take up the appropriate space in the 12 column grid that's available by default.
Your data rows are set to column widths of 4 grids, as 3 times 4 is 12, and it's easy to repeat the 'div' sections as needed in order to produce as many rows as needed.
Finally, if you use 'container-fluid' rather than 'container' in your outermost div, then your layout will span the entire width of the visible page.
The best part about going the bootstrap route however, is that everything you do using it is automatically responsive, and so will adapt and resize automatically for mobile and desktop as needed, especially if you start using a mixture of 'col-xx-yy' column types, where xx represents the device target size, and yy the number of grid columns you wish to consume.
Fiddle
table{
background-color:white;
width:100%;
}
You don't have nested tables. You have tr > td > tr > td that I think is not valid.
Also, first row don't have td element.
Simply apply width: 100% to all tables:
table {
background-color: white;
width: 100%;
}
.requestDetails {
background-color: red;
}
.container {
width: 600px;
background-color: green;
}
.row {
width: 100%;
background-color: blue;
}
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
Just add width: 100%; to the table in CSS.
Updated jsFiddle
Readup: CSS width | MDN
Just update your css like below:
.container table{
background-color:white;
width:100%;
}
If the width attribute is not set, table takes up the space it needs to display the table data. so you have to define the width of table.
so just define the width for table in CSS.
.row, table{
width:100%;
background-color:blue;
}