I have tried with this.
<th style="width:500px;overflow:hidden;">
If I have a large description It is going outside the table & I want to fix it.
<div class="Tablecontent">
<div class="table-responsive">
<div style="min-height:300px">
<table class="table table-hover" >
<thead class="tableHeadDesign">
<tr>
<th style="width:40px; overflow:hidden;">S.No.</th>
<th>Name</th>
<th style="max-width:500px;overflow:hidden;">
Description
</th>
<th>Size </th>
<th>Status </th>
<th></th>
</tr>
</thead>
<tbody class="tableBodyDesign">
<tr ng-repeat="x in media |filter:searchText">
<td>$index </td>
<td>{{x.Name}}</td>
<td>{{ x.Description }}</td>
<td > </td>
<td>{{x.Status}}</td>
<td>
<input type="button" class="btn btn-info btn-lg popbtn ViewBtn" value="View Detail"></a></input>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Here I want to fix Description Column.
You can use text ellipsis
see this example
td{
max-width:20px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
table{
width:100%
}
<div class="Tablecontent">
<div class="table-responsive">
<div style="min-height:300px">
<table class="table table-hover" >
<thead class="tableHeadDesign">
<tr>
<th style="width:40px; overflow:hidden;">S.No.</th>
<th>Name</th>
<th style="max-width:500px;overflow:hidden;">
Description
</th>
<th>Size </th>
<th>Status </th>
<th></th>
</tr>
</thead>
<tbody class="tableBodyDesign">
<tr ng-repeat="x in media |filter:searchText">
<td>1 </td>
<td>name</td>
<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td >dsdsdsdsds </td>
<td>Status</td>
<td>
<input type="button" class="btn btn-info btn-lg popbtn ViewBtn" value="View Detail"></a></input>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Are you looking for text-overflow?
<td style="max-width:500px; display:inline-block; overflow:hidden; text-overflow:clip; white-space:nowrap;">
{{ x.Description }}
</td>
Here is an example:
https://jsfiddle.net/59166290/aan0s31t/15/embedded/result/
Problem solve...
Actually I had fixed the and forgot to set the fixed size of :p
Related
I have this html styled with bootstrap. My problem is that the row inside thead is not aligned with the row inside tbody (see the jsfiddle link to see an example of what's happening):
<table class="table">
<thead>
<tr id="table-header">
<th scope="col">#</th>
<th class="search" scope="col">nome</th>
<th scope="col">
</th>
</tr>
</thead>
<tbody id="table-body" style="display: block;" data-json="/categoria/list.json">
<tr>
<th scope="row">1</th>
<td>hum</td>
<td>
<div class="btn-group" id="buttons" role="group" aria-label="comandos">
<button sec:authorize="hasPermission(#user, 'atualiza_categoria')" type="button" class="btn btn-secondary" id="update" th:attr="data-url=#{/categoria/update}" onclick="open_tab(this)">
edit
</button>
<button sec:authorize="hasPermission(#user, 'remove_categoria')" type="button" class="btn btn-secondary" id="delete" th:attr="data-url=#{/categoria/delete}" onclick="open_tab(this)">
del
</button>
</div>
</td>
</tr>
</tbody>
<tbody id="table-search" style="display: none;" data-json="/categoria/search.json"></tbody>
</table>
this code is based on the first example available here: https://getbootstrap.com/docs/4.4/content/tables/. I tried change the line:
<th scope="row">1</th>
inside tbody to:
<td scope="row">1</td>
but the same issue occurs.
jsfiddle: https://jsfiddle.net/klebermo/0gdtf7qy/
Anyone can tell how to fix that?
You can't use tbody display: block;. tbody display property will be table-row-group.
So removed style="display: block;" from tbody tag. Check here working example
Remove display: block; css property from tbody tag
<table class="table">
<thead>
<tr id="table-header">
<th scope="col">#</th>
<th class="search" scope="col">nome</th>
<th scope="col">
</th>
</tr>
</thead>
<tbody id="table-body" data-json="/categoria/list.json">
<tr>
<th scope="row">1</th>
<td>hum</td>
<td>
<div class="btn-group" id="buttons" role="group" aria-label="comandos">
<button sec:authorize="hasPermission(#user, 'atualiza_categoria')" type="button" class="btn btn-secondary" id="update" th:attr="data-url=#{/categoria/update}" onclick="open_tab(this)">
edit
</button>
<button sec:authorize="hasPermission(#user, 'remove_categoria')" type="button" class="btn btn-secondary" id="delete" th:attr="data-url=#{/categoria/delete}" onclick="open_tab(this)">
del
</button>
</div>
</td>
</tr>
</tbody>
<tbody id="table-search" style="display: none;" data-json="/categoria/search.json"></tbody>
</table>
I want to pull data from DB and list it in a table.
The screen size is fixed and they shall not be extended(no scrolling).
Once there is no more "space" for table1, I want that the following items to be listed on a sided table2. So I don't want that the screen gets extended, scrolled.
This is how my code is.
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
This picture shows how I want my implementation:
Thanks in advance.
I'd like you to try this "column-count"-techique:
div {
column-count: 4;
column-width: 150px;
column-rule: 1px solid slategrey;
}
https://codepen.io/rinatoptimus/pen/qqgBMN
The solution was to use the JSTL core begin and end attributes:
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
<tbody>
<c:forEach items="${somedata}" var="data" begin = "0" end = "5">
<tr>
<td>${data.time}</td>
<td>${data.message}</td>
<td>${data.location}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
<tbody>
<c:forEach items="${somedata}" var="data" begin = "6" end = "11">
<tr>
<td>${data.time}</td>
<td>${data.location}</td>
<td>${data.message}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
I don't think I understand Bootstrap logic quiet well. With code listed down, I defined table-responsive class with 12 units. For each cell within table i then used defined the size.
So basic idea is to get this:
0
1 2 3
However bootstrap returns me this:
_0_
_1_2 3
For the value 1 it takes the parameters of cell with value 0. Why is that, eventhose i defined cell nr.1 can have only one unit size. Please let me know. Thank you.
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td class="col-xs-3" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td class="col-xs-3" colspan="3" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
you need to alter your first row like this. You are getting this error because the column structure for each row would be same.
<tr>
<td></td>
<td class="col-xs-1" style="text-align:center;">0</td>
</tr>
Here is a pen and below is a working example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td></td>
<td class="col-xs-1 col-offset-3" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
There is a simple way to do this, i have copied your code and add display:inline-block to td element try with the snippet
table tr {
text-align:center;
}
table tr td {
display:inline-block !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive col-xs-12">
<table class="table">
<tbody>
<tr>
<td class="col-xs-1" style="text-align:center;">0</td>
</tr>
<tr>
<td class="col-xs-1" style="text-align:center;">1</td>
<td class="col-xs-1" style="text-align:center;">2</td>
<td class="col-xs-1" style="text-align:center;">3</td>
</tr>
</tbody>
</table>
</div>
I want to split my html page into two tables with button in the middle. I want to set fix width to the buttons (e.g. 40 px distance between the two tables in every screen size). The tables have to have the same width and they have to fill the screen horizontally. How can I create this layout with Bootstrap?
You need to play with some custom code for example.
<div class="el">
<div class="elLeft">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
<div class="elbtn">
<a class="btn btn-info" href="#" role="button"> < </a>
<a class="btn btn-info" href="#" role="button"> > </a>
</div>
<div class="elRight">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
css
.el {
display: table;
width: 100%;
}
.elLeft,.elRight,.elbtn {
display: table-cell;
}
.elbtn {
padding: 0 15px;
vertical-align: middle;
width: 80px;
}
.elbtn .btn {
display: block;
width: 45px;
margin: 5px auto;
}
Demo here
Inside a container or container-fluid:
<div class="row">
<div class="col-xs-5">
TABLE 1
</div>
<div class="col-xs-2">
BUTTONS
</div>
<div class="col-xs-5">
TABLE 2
</div>
</div>
and check the documentation to see how to create tables and buttons as you want
I'm trying to make a print stylesheet which hides (does not print) elements which do not have a child element with a set class.
I thought this might work but sadly it doesn't.
<style type="text/css" media="print">
table:not( > thead > tr > th > .Collapse) {
display:none;
}
</style>
I don't want to use any javascript if possible though.
Can this be done?
Here's the html for the element in question... the second table should be hidden when printed...
<table>
<thead>
<tr>
<th>
<span class="Collapse">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>
<span class="Expand">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
To target the span:
table > thead > tr > th > .Expand {
display:none;
}
Update
Targeting a css class and effecting it's parent is not currently possible. The easiest way to hide the table is to add a class to it, then you can target that class easily.
Example
<table>
<thead>
<tr>
<th>
<span class="Collapse">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
<table class="hide-for-print">
<thead>
<tr>
<th>
<span class="Expand">Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
I would suggest instead, putting the classes on the tables, and then selecting the spans inside them.
<table class="Collapse">
<thead>
<tr>
<th>
<span>Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
<table class="Expand">
<thead>
<tr>
<th>
<span>Lorem ipsum...</span>
</th>
</tr>
</thead>
<tbody style="display: none; ">
<tr>
<td>Blah Blah...</td>
</tr>
</tbody>
</table>
.Collapse {
display:none;
}
.Collapse thead tr th span {
}
.Expand thead tr th span {
}