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;
}
Related
I'm trying to create a list of tables dynamically via react and print each table in a separated page.
But the result is very messy. What I have to do to resolve this?
My CSS:
table {
width: 100%;
border: none;
border-collapse: collapse;
margin: 4.8pt;
page-break-inside: auto;
table-layout: fixed;
}
td {
height: 17px;
border: 0.5pt solid navy;
}
tr {
page-break-inside: avoid;
page-break-after: auto
}
thead {
display: table-header-group
}
tfoot {
display: table-footer-group
}
.tabela_container {
background: white;
}
The result:
(Where start the image is the second table, that I also want to start in another page when printing)
I need some help in a sizing question. If you view the following code in desktop browsers, everything is sized as it should be. If you try to open it on a mobile phone (I have tested it with several iPhones), the td (white with grey border) is not resized properly. The td element is resized correct, if there is a span element that's causing the overflow.
div.highlighter-rouge {
overflow-x: scroll;
}
div.highlight {
width: 100%;
}
.highlight {
display: inline-block;
}
.highlight {
background-color: #eeeeee;
}
pre.highlight {
margin-top: 0;
margin-bottom: 0;
}
pre code {
white-space: pre;
}
table {
margin: 15px 0;
padding: 0;
}
table {
word-wrap: anywhere;
}
table tr {
border-top: 1px solid #cccccc;
background-color: white;
margin: 0;
padding: 0;
}
table tr td {
border: 1px solid #cccccc;
text-align: left;
margin: 0;
padding: 6px 13px;
}
table tr th :last-child,
table tr td :last-child {
margin-bottom: 0;
}
table tr th :first-child,
table tr td :first-child {
margin-top: 0;
}
td.rouge-code>pre>span {
display: inline-block;
}
.highlight .nt {
color: #000080;
}
.highlight .s1 {
color: #d01040;
}
html {
-webkit-text-size-adjust: 100%;
}
<div class="language-bash highlighter-rouge">
<div class="highlight">
<pre class="highlight"><code><table class="rouge-table"><tbody><tr><td class="rouge-gutter gl"><pre class="lineno">1
2</pre>
</td>
<td class="rouge-code">
<pre>ausearch <span class="nt">-c</span> <span class="s1">'ajp-bio-0:0:0:0'</span> <span class="nt">--raw</span> | audit2allow <span class="nt">-M</span> my-ajpbio0000
semodule <span class="nt">-i</span> my-ajpbio0000.pp</pre>
</td>
</tr>
</tbody>
</table</code>
</pre>
</div>
</div>
I've tried many things now, but my level of knowledge about this, just leads to trial and error. If you don't really like the solution with tables, I can also create a version with the exact same behaviour without them.
https://codepen.io/ribbonCaptain/pen/GRrqgpE
.rouge-table td {
vertical-align: top;
}
.rouge-table td pre {
white-space: pre-wrap;
}
...will do it. See it here.
There's not much to explain.
I'm building a website in wordpress, using the 'Rookie' theme, and have installed the sportpress plugin, as well as an accordion plugin.
I'd like to display a table in accordions, but also make it display properly when on a mobile device. This is the webpage > http://wnu.054.myftpupload.com/fixtures-and-results/
I've sorted this for the majority of tables (fixtures for the month) using the following CSS:
.table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#media only screen and (max-width: 40em) {
thead th {
display: none;
}
td, th {
display: block;
}
td[data-th]:before {
content: attr(data-th);
}
}
table {
border-spacing: 0;
}
td,
th {
padding: 0.5em;
}
th {
font-weight: bold;
text-align: left;
}
thead th {
background-color: #999;
color: white;
}
td > div {
float: right;
}
#media screen and (max-width: 500px) {
thead th {
display: none;
}
thead th:first-child:after {
content: "'s";
}
td, th {
display: block;
width: 100% !important;
}
td[data-th]:before {
content: attr(data-th);
border-radius: 10px 0px 0px 10px;
font-weight: bold;
min-width: 10rem;
display: inline-block;
}
The problem I've got is that I don't have access to edit the tables in Sportspress so I can't edit the table data on the Player stats table so that it includes the 'data-th="heading"' - meaning the headers don't display.
Without the CSS above, the sportspress table displays OK (not perfect, but not bad either), I was wondering if I can set it so that the sportspress table ignores the CSS I've set up (on the responsive view) or if there is a better way to do this? If possible, the sportpress table would display the headers, but I think I'd have to upgrade from the free version?
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
}