below works in chromer, Firefox but not in IE8
Can anyone tell me why?
table {
table-layout:fixed;
}
tbody {
height: 520px;
overflow: auto;
}
table td {
min-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
text-align:center;
}
thead > tr, tbody{
display:block;
}
In IE8 tbody is not scrollable so use:
position: absolute;
and then use margin andpaddings for the divs etc.
Related
I am working in Angular Project but stuck in a design Issue
I am want to scroll the body of the table making body header fixed
I tried to do the at but not able to scroll just table body
My code and design is ready I have put it in below link -
https://stackblitz.com/edit/angular-x8c89j?file=src%2Fapp%2Fapp.component.html
Please update your table style as below
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table;
width: calc(100% - 17px);
}
tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
th, td {
padding: 5px;
word-break: break-all;
}
tr {
display: table;
width: 100%;
box-sizing: border-box;
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}
tr th:first-child,
tr td:first-child {
width: 100px;
}
I want to fix the tfoot to the bottom of the page with it being as responsive as the rows of the table.
My code: https://codepen.io/adu8/pen/MWWXqGY
The problem I face now is once I add the class="fixed-bottom" to the tr of tfoot, it goes to bottom and gets misaligned.
I tried fixing it with having a workaround by adding this css:
tfoot td {
display: inline-block;
width: calc((100%/8) - 10px);
}
As in this codepen: https://codepen.io/adu8/pen/dyyKqOv. However, it's still not able to be as responsive.
I would appreciate if someone helps fixing this.
Please use this CSS
body {
background-color: midnightblue;
color: white;
}
table {
max-width: 100%;
font-size: 2vw;
}
thead, tr, tfoot {
text-align: center;
background-color: midnightblue;
}
.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
background-color: darkslateblue;
}
.table-hover tbody tr:hover > th {
/*background-color: #06765d;*/
background-color: #009999;
}
.table td {
padding: 0.05rem;
margin: 0px;
}
.fixed-bottom {
width: 100%;
}
table tr {
display: flex; display: -webkit-flex;
width: 100%;
}
tr th,
tr td {
width: calc(100% / 8);
}
tr th:first-child,
tr td:first-child {
width: 22%;
flex-shrink: 0;
-webkit-flex-shrink: 0;
}
I need to set scroll for tbody if number of records will be more that time I view the records by using scroll bar.
For that I have used vertical scrollbar for the tbody of the table. Scrollbar is working correctly in that case that all
column values(tbody) are coming under the single th column.
How to resolve this one? In this sample I have used css for tbody
tbody {
height: calc(100vh - 340px);
display: block;
width: 100%;
overflow-y: auto;
}
Remove one line from your css
tbody {
height: 100%;
display: block;//<--- Remove this line
width: 100%;
overflow-y: auto;
}
Add this in your css class. this will work.
table ,tr td{
border:1px solid red
}
tbody {
display:block;
height:50px;
overflow:auto;
height: calc(100vh - 360px);
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc( 100% - 1em )
}
table {
width:400px;
}
updated js fiddle
https://jsfiddle.net/vinothsm92/pL1wqaj1/12/
Check with this :
tbody {
position: absolute;
width: 100%;
height: 400px;
overflow: hidden;
overflow-y: scroll;
}
and remove
.scrollbar {
height: 450px;
overflow-y: auto; // Remove this line
}
code pen
css
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
width: 14.285714286%;
box-sizing: border-box;
}
th {
vertical-align: middle;
}
td {
height: 100px;
vertical-align: top;
padding: 4px;
}
.event-list {
list-style: none;
margin: 0;
padding: 0;
}
.event-list li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span.day {
float: right;
font-weight: bold;
}
.other-month .day {
color: #888;
}
td.other-month {
background-color: #eee;
}
body {
font-family: sans-serif;
font-size: 10pt;
}
html
<td class="day-cell current-month"><span class="day">2</span><ul class="event-list"><li>1-4 FM - Fishing</li></ul></td>
I've set the width of each of the table cells to 14.28% but the <li>s push the table cells out even though I have overflow:hidden on them. I don't want the list-items to stretch the cells; I want them to show an ellipsis if the line is to long. Is that possible?
Simply add table-layout: fixed; to table
Demo: http://jsfiddle.net/Y8Zx5/
Explanation: This will force the table cells to have the specified width of 14.285714286%; forcefully, hence preventing the table cells to grow in width with the content, and resulting in the ellipsis to occur in your desired width.
Did you try adding text-overflow: ellipsis;?
I have this working with bootstrap at THIS DEMO LINK
It uses the following CSS
.setWidth {
max-width: 80px;
}
.concat>div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: inherit;
}
For this HTML
<td class="setWidth concat"><div>Some text for table cell here</div></td>
I'm working on a page that can hold very big content. It could easily grow to (and over) 10.000px in width. I simply want my page to stretch along.
This should be very simple, and I can fix it with display: table-cell, but it doesn't 'smell' as the right answer. It feels like a hack. I think I'm missing something crucial.
Fiddle
CSS:
#container { white-space: nowrap; padding: 50px; background-color: green; }
#container > div { display: inline-block; width: 200px; height: 200px; }
#container > div:nth-child(2n+1) { background-color: red; }
body { background-color: #ccc; }
HTML:
<div id="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
Why isn't the container div stretching to its content?
BODY is correctly stretched, so how do I force my container div to take the width of its parent or children?
try something like this
#container {
background-color: #008000;
display: table;
padding: 50px;
white-space: nowrap;
}
EDITED
#container {
background-color: #008000;
display: inline-block;
padding: 50px;
white-space: nowrap;
}
DEMO
Add overflow-x: scroll; to #container. Is that what you want?
Edit: changed to overflow-x :)
CSS
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
overflow-x: scroll;
}
#container {
background-color: green;
white-space: nowrap;
padding: 50px;
width: auto;
display:table;
}
#container > div {
display: inline-block;
width: 200px;
height: 200px;
display:table-cell;
}
add the line overflow-x: scroll; to your container-css
here is a jsfiddle as well