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)
Related
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 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;
}
How to print nicely while the content show in div fit to each page without any extra blank page?
#page {
width: 1.97in;
height: 1.57in;
margin: 0;
padding: 0;
}
.label{
padding: 0;
border-collapse: collapse;
width: 1.97in;
height: 1.57in;
float: left;
display: block;
clear: both;
overflow: hidden;
border-top: 1px dotted;
page-break-after: always;
border-bottom: 1px dotted;
}
This is my label printer setting
I want to print the content as label sticker, but it always show extra blank when printing. How can i configure it?
You can edit media print
#page {
width: 1.97in;
height: 1.57in;
margin: 0;
padding: 0;
}
#media print {
html, body {
width: 1.97in;
height: 1.97in;
}
}