Well to show you the problem I will simply show you an screenshot:
The Problem is that there is an horizontal scrolling bar, but i want that if the text is longer in one cell, that the text just makes a new line and the cell gets bigger.
Here you can see the markup of that table. I am using the latest bootstrap version
<article class="col-lg-9 col-md-9 col-sm-9 pull-right">
<table class="table table-striped table-condensed">
<thead>
<tr>
<td>Room</td>
<td>Player</td>
<td>Text</td>
</tr>
</thead>
<tbody>
<?php
$chatLog = new ChatLogParser('C:\AtWar\Service\Logs\2014-01-29_chat.log');
$logs = $chatLog->parseToObject();
foreach($logs AS $log)
{
echo "<tr><td>".$log[0]."</td><td><strong>".$log[1]."</strong></td><td>".$log[2]."</td></tr>";
}
?>
</tbody>
</table>
</article>
Check if you have white-space: nowrap on the cells. If so change\override it to white-space: normal
Related
I have datatables inside of bootstrap cards, but when the table is larger than the height of the card, it will exceed outside of the card. I have an overflow: auto on a table-wrapper which also does not trigger once exceeding the cards height.
heres a simplified example:
https://stackblitz.com/edit/js-bootstrap4-gbnhfx?file=style.css
I've forked you stackblitz (https://stackblitz.com/edit/js-bootstrap4-tsnbuq)
I've used a style attr here for simplicity. But the inner div is the item being overflowed, and then your outer div (which you have CSS which handles overflow) is adding scroll.
Here is the main change:
<div class="table-wrap">
<div style="height:690px">
<table class="table table-sm table-dark table-striped">
<thead>
</thead>
<tbody>
<tr>
<td>test</td>
</tr>
</tbody>
</table>
</div>
</div>
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
<div class="row">
<div class="col-md-8">
<h3 data-toggle="collapse" data-target="#collapseList" aria-expanded="false" aria-controls="collapseList"> 1 Lecturer List</h3>
<table class="table table-bordered collapse" id="collapseList">
<thead>
<tr>
<th>List Id</th>
<th>List Name</th>
<th>Total Subscribers</th>
<th>Action</th>
<th>Problems</th>
</tr>
</thead>
<tr>
<td>a</td>
<td>abcdefg</td>
<td>a</td>
<td>Synchronize</td>
<td>NOK</td>
</tr>
</table>
</div>
</div>
This is what I have when I click on the header label, it appears 1 second :
And after 1 second, this is what I have :
Why does my table is resized after the collapsing ? Is there a way to not resize the table ?
UPDATE :
Here's a JSfiddle, you can try and see yourself that there's a problem https://jsfiddle.net/0zw5a845/
Add the following CSS line to your main style sheet. This essentially overwrites the .collapse.in selector of the bootstrap style sheet.
.collapse.in {display:table}
Updated JSFiddle
Possibly due to the fact that your div has a class of col-md-8.
If you want a table spanning the full width of a page, change the class to col-md-12.
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.