If I add the following slide into the default presentation provided by reveal.js, then the table is not centred.
<section>
<p>This is centred</p>
<table>
<tr>
<td>This</td>
<td>is</td>
<td>not</td>
</tr>
</table>
</section>
I can fix it by adding in padding, but this then becomes dependent on the screen size, and I am worried that when I go to present the screen will be a different size. There must be a better way?
According to this and my testing, if you add the reveal class to your table, the newest reveal.js should center it.
<section>
<p>This is centred</p>
<table class="reveal">
<tr>
<td>This</td>
<td>is</td>
<td>not</td>
</tr>
</table>
</section>
Related
I was browsing the last hours to find a solution for my problem with latest puppeteer (2.0.0) / chromium 78.0.x to get our printing system working. We allow to setup page breaks in tables, which worked find in PhantomJS renderer, but not in the puppeteer/chromium solution.
Beside many little difference in global css and printing PDF header/footer the printing of tables was the last problem (hopefully).
It turns out that the "page-break-before: always" is simply ignored.
Example:
<table>
<thead> ... </thead>
<tbody> ...
<tr style="page-break-before: always;"> ...should be on next page ... </tr>
</tbody>
</table>
Some of the Chrome forum articles point out, this has been solved.
So the question is what is causing the problem.
Regards,
Andre
PS) Later we found now: put a "display: block" on all tags of the table solves the problem. Maybe that helps someone. Any comments on that?
<table style="display: block;">
<thead style="display: block;"> ... </thead>
<tbody style="display: block;"> ...
<tr style="display: block; page-break-before: always;"> ...is now on the next page ... </tr>
</tbody>
</table>
Bad news for the solution we provided above. This destroys the feature of having table headers on each page.
setup 1)
Setting "display: block;" for the thead will disable the feature of having the table header on each page.
==> no page break
setup 2)
Set the thead to "display: table-header-group;" and tbody to "table-row-group" then the chrome will ignore the page-breaks.
==> no table headers on each page
setup 3) Having the thead: "display: table-header-group;" and the tbody: "display: block" is destroying the column structure. The body will be rendered only on the first column.
==> Destroys the table. the body is just in the first column
Here comes our hack to solve the problem. we use setup 3, with this:
- we build a table with just one column
- the column contains a table with all columns we really want to render
- the column widths are set to fix values (that was anyway the case in our rendering system)
<table>
<thead>
<tr>
<td> <table> .... the header of the real table </table> </td>
</tr>
</thead>
<tbody style="display:block;">
<tr>
<td>
<table> .... one row of the real table </table>
<td>
</tr>
<tr>
<td>
<table> .... another row of the real table </table>
<td>
</tr>
</tbody>
</table>
In the following HTML I'm using Bootstrap. The real display as shown in image below has two columns too far apart. How can I make them display a bit closer to each other.
NOTE: For the sake of brevity of this post, I've simplified the html a bit. The real html involves some programming code - such as foreach loop and data fetch from database etc - as that all is not related to this post.
<div class="row">
<div class="col-md-12">
<table class="table table-borderless table-condensed">
<thead>
<tr><th></th><th></th></tr>
</thead>
<tbody>
<tr>
<td class="col-md-2">
item1
</td>
<td class="col-md-10">
<span>item2</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Display:
UPDATE: If I change first column <td class="col-md-2"> to <td class="col-md-1"> and the second column <td class="col-md-10"> to <td class="col-md-11"> the content in first column gets wrapped (something I don't want since all the content in first column is of fixed length and hence it does not need to be wrapped).
To address your updated code with the first column changed to col-md-1, you can add text-nowrap to solve your wrapping issue:
<td class="col-md-1; text-nowrap">
I have below view which generates PDF invoice using MvcRazorToPdf library
<table border="0">
<tr>
<td>
<h1>Company Name </h1>
</td>
<td>
<div style="text-align:right;margin-right:0px;">
Invoice
</div>
</td>
</tr>
</table>
<hr/>
<div>
#Model.InvoiceNum
</div>
Above code generates below view in pdf
But how much ever I style the above div within td for invoice, I am not able to move the Invoice text to the right side of the pdf. I've tried adding link to bootstrap.css which doesn't work either. Anyone have any solution for this? Has anyone worked on styling the pdf with MvcRazorToPdf librabry?
Your text alignment is being respected, its just that by default, you table and its cells will be collapsed to fit the content (easy to check by using your browser tools to inspect the elements).
Give your table (or its cells a width), for example
<table style="width:100%;">
However, using <table> elements is not good practice (refer Why not use tables for layout in HTML? and Why Tables Are Bad (For Layout*) Compared to Semantic HTML + CSS.). Instead you can use floats or relative/absolute positioning, for example
<div style="position:relative;">
<h1>Company Name</h1>
<span style="position:absolute;right:0;bottom:0">Invoice</span>
</div>
or
<div>
<h1 style="display:inline-block">Company Name</h1>
<div style="float:right;margin-top:40px;">Invoice</div>
</div>
I'm having an issue with the Bootstrap 3 table-responsive on iOS 7 (iPad4 on safari).
When I load the webpage with the table it can only show 70% of the table and the rest is hidden to the right:
But the issue is when i scroll to the right the background color of the table is lost and the background of the body is shown:
I've simplified the table as much as possible to weed out anything silly i missed with no luck. Here is how the body is defined (i removed the table info because it's being created by some ng-repeats and aren't helpful):
<body style="background-color: #3E3E40;">
<div class="container">
<div class="table-responsive">
<table class="table" style="background-color: #E0E0E3;">
....
</table>
</div>
</div> <!-- /container -->
</body>
Any information or suggestions on how to fix this issue will be greatly appreciated!!!
How does this work for you? http://jsfiddle.net/panchroma/qYY2y/
HTML is unchanged, I'm applying the table background color to table-responsive div that wraps your table
.table-responsive{
background-color:#fff;
}
Hope this helps!
EDIT
A variation for #rapcal with a drop shadow on the responsive table
http://jsfiddle.net/panchroma/16yt4vnq/
Applying a drop shadow to the table directly won't work because of how the native bootstrap stying handles overflows on the table-responsive div. But if you wrap everything in another div you have more freedom
HTML
<div class="wrapper"> <!-- apply drop shadow to this div -->
<div class="table-responsive">
<table class="table"> ... </table>
</div>
</div>
I am trying to get a footer in a generated pdf file. I am using this library
https://github.com/andyhutch77/MvcRazorToPdf
Is there any way to get some of my content to the bottom of the page? Unfortunately pdf does not respond to position:absolute; bottom:0px; or margin-bottom.
The page shows an unknown amount of records on the page, so I cannot do it statically.
I found a way to solve this problem. It's not very neat, but I doubt there are other ways since MvcRazorToPdf does not support the margin and position styles.
<table id="wrapper" style="height:100%;">
<tr>
<td valign="top">
Put your site content here.
</td>
</tr>
<tr>
<td valign="bottom">
Put your footer here.
</td>
</tr>
</table>