This is most likely the culprit for this page:
http://www.mypicx.com/04192010/ff/
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
th
{
background-color:#A7C942;
color:white;
}
I don't know why, but the page has some php scripts in it which shows a table from mysql database. As you can see in the url above.
Please help, why do I see those lines everytime I put those css scripts
Looks like your borders are being set to all of the tables in the page, and not just one.
Try something like:
.mytable
{
border-collapse:collapse;
}
.mytable th, .mytable td
{
border: 1px solid black;
font-family:Arial, Helvetica, sans-serif; letter-spacing: 1px; font-size:3;
font-size:10px;
}
.mytable th
{
background-color:#A7C942;
color:white;
}
And use a class in the HTML on the table you wish to have these borders on:
<table class="mytable">
<tr>
<th>Time</th>
</tr>
<tr>
<td><span class="A">8:00 AM</span></td>
</tr>
</table>
Related
I'm making a Wordpress module to reserve a room.
Now I use mPDF to create the contracts of the reservations automatically.
mPDF has problems with creating tables with on every row a border line.
When I create the table and view it in html everything looks fine. But when I create a PDF with mPDF the does not show me the row bottom border.
This is the html code that I use to generate the pdf:
.logo
{
display: inline-block;
width: 130;
height: 146;
align: left;
hspace: 12;
}
.headerText
{
display:inline-block;
text-align: right;
float:right;
}
.header{
padding-bottom: 20px;
}
.table{
border-left: thin solid;
border-right: thin solid;
border-bottom: thin solid #000000;
border-top: thin solid;
}
.table{
margin-top: 10px;
margin-bottom: 10px;
border-collapse: collapse;
}
table tr {
border-bottom: 1px solid black;
}
table tr:last-child {
border-bottom: none;
}
.Cell
{
width: 300px;
}
.firstCell
{
border-left: thin;
border-right: thin solid;
border-bottom: thin;
border-top: thin;
}
.smallCell
{
width:150px;
}
.largeCell
{
width: 450px;
}
.row
{
display: block;
}
.koninklijkeLogo
{
width: 30px;
}
.maxSize
{
width: 600px;
}
<table class="table">
<tr class="row">
<td class="smallCell firstCell">Naam:</td>
<td class="largeCell">{%name%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Adres:</td>
<td class="largeCell">{%adres%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">Telefoonnummer:</td>
<td class="largeCell">{%phone%}</td>
</tr>
<tr class="row">
<td class="smallCell firstCell">E-mailadres:</td>
<td class="largeCell">{%mail%}</td>
</tr>
</table>
Can I resolve the problem by changing some of my code or is this a bug in mPDF?
From this document, it appears that borders for tr elements are supported by the latest version of mPDF (version 6).
Are you using the latest version?
Maybe you can try to apply a bottom border to the cells only, and not the rows? (Just make sure there are no table cellspacing or td cell margins, or you will see gaps in the borders).
I am trying to build a comment system below my articles where users can reply on the comment as well. Comment or its reply can be posted by only logged-in users.
There I have created 4 tables in MySQL.
User Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>email</th></tr>
<tr><td>1</td><td>abc#gmail.com</td></tr>
<tr><td>2</td><td>xyz#gmail.com</td></tr>
<tr><td>3</td><td>pqr#gmail.com</td></tr>
<tr><td>4</td><td>abc#yahoo.com</td></tr>
<tr><td>5</td><td>xyx#yahoo.com</td></tr>
</table>
Profile Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>user_id</th><th>fname</th><th>lname</th></tr>
<tr><td>1</td><td>3</td><td>PQR</td><td>Gmail</td></tr>
<tr><td>2</td><td>2</td><td>XYZ</td><td>Gmail</td></tr>
<tr><td>3</td><td>1</td><td>ABC</td><td>Gmail</td></tr>
<tr><td>4</td><td>5</td><td>XYZ</td><td>Yahoo</td></tr>
<tr><td>5</td><td>4</td><td>ABC</td><td>Yahoo</td></tr>
</table>
Article Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>article_title</th><th>article_content</th></tr>
<tr><td>1</td><td>Helooooooo</td><td>Hi, How are you?</td></tr>
<tr><td>2</td><td>Hiiiiiiiiiiii</td><td>Hey, How are you?</td></tr>
<tr><td>3</td><td>Heeeeeey</td><td>Hello, How are you?</td></tr>
</table>
Comment Table
<style type="text/css">
table.tableizer-table {
border: 1px solid #CCC; font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.tableizer-table td {
padding: 4px;
margin: 3px;
border: 1px solid #ccc;
}
.tableizer-table th {
background-color: #104E8B;
color: #FFF;
font-weight: bold;
}
</style>
<table class="tableizer-table">
<tr class="tableizer-firstrow"><th>id</th><th>article_id</th><th>user_id</th><th>parent_comment_id</th><th>Comment</th></tr>
<tr><td>1</td><td>2</td><td>5</td><td>0</td><td>Great Article</td></tr>
<tr><td>2</td><td>2</td><td>2</td><td>0</td><td>Nice Article</td></tr>
<tr><td>3</td><td>2</td><td>4</td><td>1</td><td>I agree Great Article</td></tr>
<tr><td>4</td><td>2</td><td>1</td><td>1</td><td>I also agree Great Article</td></tr>
<tr><td>5</td><td>2</td><td>3</td><td>0</td><td>Bad Article</td></tr>
<tr><td>6</td><td>2</td><td>4</td><td>2</td><td>OK Artilce</td></tr>
</table>
I want my output to display as:
Name: XYZ Yahoo (Comment)
Great Article
Name: ABC Yahoo (Reply on 1st Comment)
I agree Great Article
Name: ABC Gmail (Reply on 1st Comment)
I also agree Great Article
Name: XYZ Gmail (Comment)
Nice Article
Name: ABC Yahoo (Reply on 2nd Comment)
OK Artilce
Name: PQR Gmail (Comment)
Bad Article
In the above comment system i am using hierarchical table structure to store comment and its replys.
Hope i have been able to explain my problem.
Can someone help me with MySQL statement and php code
I would tweak the order by clause a little bit so you would get all posts in the right order on php side, so you can simply loop through the resultset.
$sql = 'SELECT c.id, parent_comment_id,`comment`, p.fname, p.lname FROM comment c INNER JOIN profile p on c.user_id=p.user_id INNER JOIN WHERE article_id='.$article_id . ' ORDER BY IF(parent_comment_id=0,id,parent_comment_id) ASC, id ASC;'
While looping through the resulset in php I would build an array to hold the ids of each record to determine their rank within the comments. Although, I should note, that on forums you can rarely see the reference that a comment is a response to the first comment, you can usually see that a comment is a response to a comment made by sy at such and such time. Anyway, the helper array can hold user names and timestamps of the records as well.
//outside the loop
//initialise rowcount variable to 0
$rowcount=0
...
//within the loop
//rowcount variable
$rowcount++;
$helper[$row['id']]=$rowcount;
...
//if a comment has a parent comment, get the parent's rownumber
echo 'Reply to ' . $helper[$row['parent_comment_id']] . '. comment';
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Browsers shows like this Browsers View but Generated PDF by dom pdf shows like this Generated PDF View
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}
#header { position: fixed; left: 0px; width:100%; bottom: -150px; right: 0px; height: 150px; background-color: #4b94d9; color:#000; text-align: left; }
#page-wrap {
width: 700px;
margin: 0 auto;
}
.center-justified {
text-align: justify;
margin: 0 auto;
width: 30em;
}
table.outline-table {
border: 1px solid;
border-spacing: 0;
}
tr.border-bottom td, td.border-bottom {
border-bottom: 1px solid;
}
tr.border-top td, td.border-top {
border-top: 1px solid;
}
tr.border-right td, td.border-right {
border-right: 1px solid;
}
tr.border-right td:last-child {
border-right: 0px;
}
tr.center td.center {
text-align: center;
valign:"middle";
}
td.pad-left {
padding-left: 5px;
line-height: 2;
}
tr.right-center td, td.right-center {
text-align: right;
padding-right: 50px;
}
tr.right td, td.right {
text-align: right;
}
.content > div > span{
display:inline-block;
width:50%; /* or choose some other value */
}
.contentdate > div > span{
display:inline-block;
width:35%; /* or choose some other value */
}
<table width="100%" class="outline-table">
<tbody>
<tr class="border-bottom border-right" style="background:#353940;color:#FFF;">
<td width="35%" class="pad-left"><strong>Item</strong></td>
<td width="10%" style="text-align:center;"><strong>Quantity</strong></td>
<td width="10%" class="right"><strong>Unit Cost</strong></td>
<td width="15%" class="right"><strong>Total</strong></td>
</tr>
<tr class="border-right">
<td class="pad-left">some item name one</td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
</tbody>
</table>
This code works prefect on browsers but problem is that when i fill dynamic data and generating PDF using dompdf then <td>item</td> full column goes top on cell.
What is the solution ?
Try This.
td.pad-left {
padding-left: 5px;
//line-height: 2; <--remove this
}
Html
<tr class="border-right">
<!-- give margin top in particular line -->
<td class="pad-left"><p style="margin-top:10px;">some item name one</p></td>
<td style="text-align:center;">15</td>
<td class="right">1500.00</td>
<td class="right">22500.00</td>
</tr>
I have a PDF that is being generated by TCPDF in php. The whole thing looks great, but I cant increase the size of font in any section of the table that is generated. My CSS is not great, but any idea what I am doing wrong?
CSS:
<style>
}
table.first {
color: #003300;
font-family: helvetica ;
font-size: 8pt;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
border-bottom: 1px solid black;
background-color: white;
}
td {
border: 1px solid black;
background-color: white;
}
</style>
HTML:
<table class="first" cellpadding="0" cellspacing="0">
<tr>
<td width="50%"><B>1a.</b> Name of Insurance Plan (<B>OFFICE USE ONLY</b>):
<BR>
<BR><BR>
<BR><B>1b.</b> Insurance I.D. Number (<B>UTAH ONLY</b> - Check with the patient and if they have Utah Medicaid and include the Medicaid I.D. Number.):
<BR><BR><B><span style='font-size: 24pt;'>$medicaidid,</span></b>
<BR><BR><B>1c.</b> Patient Name (Last Name, First Name) & DOB (Typed out, example: January 01, 1901):
<BR><BR><B>$name</b>
<BR><B>$dob</b><BR></td>
<td width="50%"><B>2a.</b><BR> <img src="lilogo.png" style="width:8500%;" height="75">
<BR><B>2b.</b> Appointment Number: <BR><BR> <B>$appid</b></td>
</tr>
</table>
remove the } under the style tag
This is your code:
<style>
}
table.first {
color: #003300;
font-family: helvetica;
Try this instead:
<style>
table.first {
color: #003300;
font-family: helvetica;
I dont know what are you trying to say, but on jsfiddle.net there is no issue regarding font size as for example when I tried,
*{
font-size:20px;
}
it worked good or if you have any other issue, please be clear !
First post and new to jQuery. Looked hard but did not find a fully relevant post.
Have alternating row colours in a table; one class NULL/empty one class=alt. jQuery script partially works to highlight the row when clicked.
Question is: how do you use removeClass and then restore (addClass/toggleClass) the specific class that was removed on an onChange event? Any help appreciated. Tks. (See Fiddle below)
HTML
<table id="fooBar" border="0">
<tr>
<th>Text</th>
<th>Text</th>
<th>Text</th>
<th></th>
<th></th>
</tr>
<tr class="">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="alt">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
<tr class="alt">
<td>Text</td>
<td></td>
<td></td>
<td></td>
<td>image</td>
<td>image</td>
</tr>
</table>
CSS
table {
width:100%;
border-collapse:collapse;
table-layout:auto;
vertical-align:top;
margin-bottom:15px;
border:1px solid #999999;
}
th {
font: bold 11px"Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #F2EDEB;
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
border-top: 1px solid #C1DAD7;
letter-spacing: 2px;
text-transform: uppercase;
text-align: left;
padding: 6px 6px 6px 12px;
background: #522D25 url(images/bg_header.jpg) no-repeat;
}
tr {
background: #fff;
color: #261F1D;
}
tr:hover, tr.alt:hover {
color: #261F1D;
background-color: #E5C37E;
}
.highlighted {
color: #261F1D;
background-color: #E5C37E;
}
tr.alt {
background: #F5FAFA;
color: #B4AA9D;
}
td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
padding: 6px 6px 6px 12px;
}
jQuery
$(document).ready(function () {
$("tr").click(function () {
$(this).closest("tr").siblings().removeClass("highlighted");
$(this).toggleClass("highlighted");
})
});
// Note: currently only works for row without '.alt' css class assigned (ie. empty)
// question is how to replace a class and then RESTORE the class onChange
Here is the jsFiddle: http://jsfiddle.net/codeChaos1988/kh4VY/1/
Also any pointers on best tutorial sites for actually learning to program in javascript/jQuery would be appreciated as well.
Thank you for your help in advance.
So that you don't have to worry about removing/restoring the original class, try changing your css to:
.highlighted {
color: #261F1D !important;
background-color: #E5C37E !important;
}
For JS:
$('table').on('click', 'tr', function () {
var state = $(this).hasClass('highlighted');
$('.highlighted').removeClass('highlighted');
if ( ! state) { $(this).addClass('highlighted'); }
});
Added this in datatable initialisation section:
"createdRow": function( row, data, index ) {
if (tableInitialized){
flashRow( row );
}
This worked!