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
Related
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.
So I have a table within a modal, and I just can't figure out why the css doesn't do anything. What am I missing here?
<table class="table table-striped">
<thead class="okgo">
<tr>
<th>MissionType</th>
<th>MissionDate</th>
<th>ElipseNumber</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>#ViewBag.SelectedMission.MissionType</td>
<td>#ViewBag.SelectedMission.MissionDate</td>
<td>#ViewBag.SelectedMission.ElipseNumber</td>
<td>#ViewBag.SelectedMission.Notes</td>
</tr>
</tbody>
</table>
css:
table.table.table-striped.okgo{
background-color:black;
}
Cheers.
You need your css selector to be table.table.table-striped .okgo because .okgo is nested inside the table, not part of it. Edit for clarity, I put a space between table.table.table-striped and .okgo
Turns out the problem was in my browser. ctrl+f5 solved it.
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.
In my HTML table sometimes I have long words in my cells. So I need to break some words if they overflows its area.
This questions shows how to break table cell: Word-wrap in an HTML table
This css style is recommended : style="word-wrap: break-word; table-layout: fixed; width: 100%"
But if I use table-layout:fixed, my columns becomes equal sized. But in my case width is 100% for table and if table is fixed then columns share width equally. But this takes too much height from page.
My fiddle: http://jsfiddle.net/mavent/Y54s9/17/
What I need ?
- My table has 2 columns, I want second column to be as narrow as possible.
- 2nd column's width shouldn't exceed column's name.
- Column names shouldn't be wrapped. < th > names mustn't be wrapped.
- 1st column should be wide. I don't prefer to fixate column width like %60, %70 etc. But if it is a solution I can use fix column width, but responsiveness must be taken into account.
- Table should be responsive. I will use this table in mobile layouts.
- Word must be wrapped strictly if word exceeds the cell width. For example if cell can take max 40 characters and word is 45 characters, word can be breaked whatever 41. character is.
Output should look like this in small and big screens:
Code:
.myclass1 {
white-space: normal;
}
.myclass2 {
word-wrap: break-word;
table-layout: fixed;
}
<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
</tbody>
</table>
<hr><hr>
<table class="table table-striped table-condensed dataTable myclass1" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
<tr>
<td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>
</td>
</tr>
</tbody>
</table>
<hr><hr>
<table class="table table-striped table-condensed dataTable myclass2" id="mytable">
<thead>
<tr>
<th class="sorting">header1</th>
<th class="sorting">header2</th>
</tr>
</thead>
<tbody>
<tr class="">
<td class="">
<span class="">Some words are generally short and easy to read, butsomewordsareĞĞÜÜveryverylongIŞÖlikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">123</button></span>
</td>
</tr>
<tr>
<td>
<span>Some words are generally short and easy to read, butsomewordsare veryverylonglikeethisssssGAAAAAAAAAAAAAABBBBBBBBBBBBBbbbbbCCC
<i class="glyphicon glyphicon-share-alt"></i></span>
</td>
<td class="">
<span><button class="btn btn-primary btn-xs">225</button></span>
</td>
</tr>
</tbody>
</table>
It seems that with HTML and CSS, you cannot cause automatic word breaking in table cells without making table columns of fixed width and using table-layout: fixed). And you cannot specify that one column be just as narrow as it needs and the other column take all the rest (when table-layout: fixed is used).
However, there’s a rather simple JavaScript workaround, though for a large table, it might cause inefficiency (and a flash from initial layout to modified layout). You would not set fixed layout initially, or column widths, just a total width of 100%. You would thus let the browser format the table in automatic layout, so that the second column becomes just as wide as it needs to be (assuming there is enough content in the other column, as we can expect here). Then you just get the width of the second column and explicitly set it on the header cell and you set table layout to fixed.
Sample code:
<style>
#mytable {
word-wrap: break-word;
width: 100%;
}
</style>
...
<table id="mytable"
...
<script>
window.onload = function() {
var t = document.getElementById('mytable');
var th2 = t.rows[0].cells[1];
th2.style.width = th2.clientWidth + 'px';
t.style.tableLayout = 'fixed';
}
</script>
P.S. I still think this is an all wrong approach, unless the cell content is some code of very special kind, like a DNA sequence, that can really be broken at any point. For any normal and abnormal text in human languages, hyphenation or other language-specific word division should be applied. For most code expressions, permissible break points should be indicated, if needed, e.g. with the <wbr> tag or with zero-width no-break spaces.
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.