I'm using Laravel DOMPDF Wrapper and I want to print a table on a PDF but when it reaches the bottom of the page, my table breaks, I want the whole to go down but can't find a way to do this.
Table Structure:
<table class="tabla1">
<tr align="center">
<td style="width: 35px;" >Nº</td>
<td>FROM</td>
<td>TO</td>
<td class="hiddebottom">DETAILS</td>
<td style="width: 60px;">COST</td>
</tr>
<tr align="center">
<td class="hiddebottom"></td>
<td>Takami Rodriguez</td>
<td>Sara portan</td>
<td class="ocultar"></td>
<td class="ocultar"></td>
</tr>
<tr align="center">
<td class="ocultar">1</td>
<td class="dir">asdasdasdasdassadasasdasdasd</td>
<td class="dir">asdasddadasdsadadadadadasdasdasd</td>
<td>&bsp;</td>
<td class="ocultar">$23</td>
</tr>
<tr align="center">
<td class="hidetop"></td>
<td> 61569559 </td>
<td> 61569559 </td>
<td></td>
<td class="hidetop"></td>
</tr>
</table>
I'm using:
table tr td{
border: 0.3px solid black;
page-break-inside: avoid !important;
}
Helps please
Try changing your CSS to this.
table {
border: 0.3px solid black;
page-break-inside: avoid !important;
}
Related
I have a table structured like the one below and it is a on page with a gray background. The problem I am having is removing the cell borders.
<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<tdstyle="background-color: #fff;"></td>
</tr>
<tr>
<td style="background-color: #fff;"></td>
<td style="background-color: #fff;"></td>
</tr>
<tr>
<td colspan="2"></td>
</tr>
</tbody>
</table>
This is what it looks like no matter what I have tried such as adding a .no-border class border:0; to the <tr> or adding inline css to the <td>. It still comes out like this...
How can I remove the border around all the cells?
You need to remove the cellspacing like this:
table {
border-spacing: 0;
border-collapse: collapse;
}
This is equivalent for the cellspacing="0" HTML attribute. See this example:
body {
background: grey;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
<table width="510">
<tbody>
<tr>
<td style="background-color: #fff;" colspan="2" width="510">t</td>
</tr>
<tr>
<td style="background-color: #fff;">t</td>
<td style="background-color: #fff;">t</td>
</tr>
<tr>
<td style="background-color: #fff;">t</td>
<td style="background-color: #fff;">t</td>
</tr>
<tr>
<td colspan="2">t</td>
</tr>
</tbody>
</table>
I have a table with the following class:-
.multicolor {
border: 1px solid #000000;
}
and for one specific table row I wanted to remove the left and right borders, replacing them with top and bottom so that it looks like one table is ending and another is beginning. Here's how I was trying it and no any luck.
<tr style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<td colspan="7" style="background-color:transparent; border-style:solid none solid none; border-width:1px 0px 1px 0px">
<br></td>
</tr>
The top and the bottom borders are appearing but the side ones remain. Does anyone know if there is a way to override the inherited border property for that row?
try this.
table {
border-collapse:collapse;
}
td {
border:none;
}
You have to set border of your td or th "none";
May be this will help hide cells border using css
hello See the below fiddle as you mentioned the merge row I did this for both border and without border in the rows .hope it helps
<table>
<thead>
<tr>
<th class="col1">1</th>
<th class="col2">2</th>
<th class="col3">3</th>
</tr>
</thead>
<tr class="first">
<td>asdas</td>
<td>asdas</td>
<td >boooo</td>
</tr>
<tr class="second">
<td>asdas</td>
<td>asdas</td>
<td>asdas</td>
</tr>
</table>
see the below fiddle
fiddle demo
try this,working fine
<style>
.border {
border:solid 1px #000;
}
.border-head {
border-bottom:solid 1px #000;
}
</style>
<table width="300" border="0" cellpadding="0" cellspacing="0" class="border" >
<thead>
<tr>
<td class="border-head"> </td>
<td class="border-head"> </td>
<td class="border-head" > </td>
</tr>
</thead>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
I have a table with a lot of records and a search box
<table>
<tr>
<td class="col-3">name1</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
.col-3{
width:33,33%
}
Some of the records may be displayed as none, so if the search box returns a full "none" column it gets wraped to none as if it didnt have the "witdh:33,33%" atribute.
Anyone knows a way to keep the elements in his original size even if they dont have content?
Thanks in advance.
Try table-layout: fixed along with a fixed width for the table
table {
width: 100%;
table-layout: fixed;
}
.col-3 {
width: 33, 33%;
border: 1px solid grey;
}
<table>
<tr>
<td class="col-3">name1 askdlhaslkdhsaldsad asjd;kadaj as;dj;asjd as ;asjsd;asjd;ja</td>
<td class="col-3">sName1</td>
<td class="col-3">age1</td>
</tr>
<tr>
<td class="col-3">name..</td>
<td class="col-3">sName..</td>
<td class="col-3">age..</td>
</tr>
<tr>
<td class="col-3">nameN</td>
<td class="col-3">sNameN</td>
<td class="col-3">ageN</td>
</tr>
</table>
try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
I dont know if this is possible but...I am trying to format a table with css, to have a specific look. This is for a wordpress site that will be updated by my client. The problem is that she is going to be copying/pasting tables with a specific format, and i want the table to have that format without her doing any extra work.
This is what i have so far.
I want the cells with the Bold text to not have a dotted line bellow them.
Right now i am formating the tr lines to add the dotted lines like this:
html
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong></td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong></td>
</tr>
.....
css
.dotted tr:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted tr:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
Is there a way i can do this without having to add a custom class tag for each that has the bold text in it ?
This is how i want it to look like, but this is all done manually...That's what i am trying to avoid.
ps: Sometimes the tables might have more than 1 'data' under the bold letters so its not always odd, even lines, when it comes to the 'title' and the 'plays' bellow them. (this is a site for musical plays)
-Thanks
#Manoj Kumar Yeah the bold items are always under colspan 2
Since you stated the above comment, I have a CSS hack for it.
Change your CSS to have dotted border only on td instead of tr elements.
Target the elements with colspan=2 with attribute selector to have no border.
table {
background: gray;
}
.dotted td:nth-child(even) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td:nth-child(odd) {
text-decoration: none;
border-bottom: 1px white dotted;
}
.dotted td[colspan="2"] { /* Attribute selector */
border: 0 none;
}
<table class="dotted" border="0" width="450" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
<tr>
<td colspan="2"><strong>Argento</strong>
</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td>Cake Box Lady</td>
<td style="text-align: right;">Postcard from Morocco</td>
</tr>
<tr>
<td colspan="2"><strong>Bellini</strong>
</td>
</tr>
</tbody>
</table>
I'm trying to merge tables together by using colspan, but cant seem to create my table. How can i merge tables columns together like following:
The general layout would be:
table,
td {
border: 1px solid #000;
}
table {
width: 50%;
border-collapse: collapse;
}
<table>
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Here is the solution
HTML code is here:
<table width="500" border="1" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
CSS code is here :
table,td {
border-collapse: collapse;
}
JS fiddle Link : http://jsfiddle.net/naveenkumarpg/543c3896/
if you need exact widths for td's you have to use class selector and adjust accordingly