I have the following code and I want to add some more horizontal space in between the table data. Cellpadding doesn't work because it adds space both horizontally and vertically.
Here's my code:
<table style="width: 745px; margin-left: auto; margin-right: auto; font-family: Calibri; font-size: 16px;">
<tr>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Parking:</strong> None
</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Floor Cover:</strong> Carpet
</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Extra Field:</strong> None
</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;">
<strong>Extra Field:</strong> None
</td>
</tr>
<tr>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Fencing:</strong> None </td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Security:</strong> None</td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Pool:</strong> None </td>
<td width="25%" style="border-bottom: 1px solid; border-bottom-color:#D5D5D5;"><strong>Topography:</strong> None </td>
</tr>
</table>
try this
.space {
padding-top: 20px ;
padding-bottom: 20px ;
border-bottom: 1px solid;
border-bottom-color: #D5D5D5;
}
<table style="width: 745px; margin-left: auto; margin-right: auto; font-family: Calibri; font-size: 16px;">
<tr >
<td class="space" width="25%" >
<strong>Parking:</strong> None
</td>
<td class="space" width="25%">
<strong>Floor Cover:</strong> Carpet
</td>
<td class="space" width="25%">
<strong>Extra Field:</strong> None
</td>
<td class="space" width="25%">
<strong>Extra Field:</strong> None
</td>
</tr>
<tr>
<td class="space" width="25%"><strong>Fencing:</strong> None </td>
<td class="space" width="25%"><strong>Security:</strong> None</td>
<td class="space" width="25%"><strong>Pool:</strong> None </td>
<td class="space" width="25%"><strong>Topography:</strong> None </td>
</tr>
</table>
You can use line-height property in CSS. Go through JSFiddle to see this
HTML Code -
<table class="table">
<tr>
<td>
<strong>Parking:</strong> None
</td>
<td>
<strong>Floor Cover:</strong> Carpet
</td>
<td>
<strong>Extra Field:</strong> None
</td>
<td>
<strong>Extra Field:</strong> None
</td>
</tr>
<tr>
<td><strong>Fencing:</strong> None </td>
<td><strong>Security:</strong> None</td>
<td><strong>Pool:</strong> None </td>
<td><strong>Topography:</strong> None </td>
</tr>
</table>
CSS Code -
.table {
width: 745px;
margin-left: auto;
margin-right: auto;
font-family: Calibri;
font-size: 16px;
}
.table td {
border-bottom: 1px solid;
border-bottom-color: #D5D5D5;
width: 25%;
line-height: 2;
}
Also, try to avoid write inline CSS. Hope it helps you.
Related
I am working on a project where I need to coloring columns of an html table based on how much percentage of a total that data takes up. For example if Alice has 3 apples and 1 orange, that row should be 75% colored for apple, and the other 25% for orange. And if Bob has 2 apples and 2 oranges is should be colored 50/50. My expertise isn't in HTML/CSS, so I am very confused with how my html is working.
If do only one row of a table I get the correct answer, but when I add rows, they couple together and don't have the same proportions.
<table style="width: 100%">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76" bgcolor="#4a5666"> </td>
</tr>
</table>
Am I doing something wrong, and is there a way I can fix it?
Thanks
Coupled Rows
Check this solution out:
<html>
<head>
<style type="text/css">
.mytable {
border-collapse: collapse;
width: 100%;
background-color: white;
}
.mytable-head {
border: 1px solid black;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-head td {
border: 1px solid black;
}
.mytable-body {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.mytable-body td {
border: 1px solid black;
border-top: 0;
}
.mytable-footer {
border: 1px solid black;
border-top: 0;
margin-top: 0;
padding-top: 0;
}
.mytable-footer td {
border: 1px solid black;
border-top: 0;
}
</style>
</head>
<body>
<table class="mytable mytable-head">
<tr>
<td width="25%">25</td>
<td width="50%">50</td>
<td width="25%">25</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="50%">50</td>
<td width="30%">30</td>
<td width="20%">20</td>
</tr>
</table>
<table class="mytable mytable-body">
<tr>
<td width="16%">16</td>
<td width="68%">68</td>
<td width="16%">16</td>
</tr>
</table>
<table class="mytable mytable-footer">
<tr>
<td width="20%">20</td>
<td width="30%">30</td>
<td width="50%">50</td>
</tr>
</table>
</body>
</html>
Credits to #TokPhobia for this answer (html table cell width for different rows)
tables have columns. The width of a column is constant. Use separate tables
table{
box-sizing:unset;
border-spacing:0;
}
<table style="width: 100%;">
<tr>
<td width="10%" bgcolor="#4a5666"> </td>
<td width="80%" bgcolor="#304aa6"> </td>
<td width="10%" bgcolor="#4a5666"> </td>
</tr>
</table>
<table style="width: 100%;">
<tr>
<td width="6%" bgcolor="#4a5666"> </td>
<td width="16%"bgcolor="#304aa6"> </td>
<td width="76%" bgcolor="#4a5666"> </td>
</tr>
</table>
You're printing two rows of table in a wrong way, try to use col and row class in your tag. That's how it'll be responsive also won't need to add the width too.
I need a specific table construction with borders. I have problem with table in IE. Rowspan not work. Table schedule from 6 cols.
I need use table, because requires marketing platform
I need this view. It's working in Chrome and Firefox:
This is the view in IE:
Code:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td></td>
<td width="600px" style="text-align:center;">
<table width="600px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="600px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" width="364px" height="15px"></td>
<td colspan="2" rowspan="2" width="236px" height="60px"><img src="logo.jpg" alt=" Logo" border="0" /></td>
</tr>
<tr>
<td colspan="4" rowspan="2" width="364px" height="225px" style="border-top: 1px solid #000000; border-left: 1px solid #000000;"><img src="header.jpg" alt=" Header" border="0" /></td>
</tr>
<tr>
<td colspan="2" width="236px" height="180px" style="border-right: 1px solid #000000;"></td>
</tr>
<tr>
<td colspan="6" style="border-left: 1px solid #000000; border-right: 1px solid #000000;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<td width="175px"></td>
<td valign="top" align="right">
<p style="padding: 0; margin: 0; font-family: 'Tahoma', sans-serif; font-size: 14px; font-weight: normal; color: #000000; line-height: 22px;">Loren</p>
</td>
<td width="80px"></td>
</table>
</td>
</tr>
<tr>
<td colspan="6" width="600px" height="30px" style="border-left: 1px solid #000000; border-right: 1px solid #000000;"></td>
</tr>
<tr>
<td width="29px" height="126px"><img src="icons.jpg" alt=" Icons" border="0" /></td>
<td width="146px" height="126px" style="border-bottom:1px solid #000000;"></td>
<td colspan="3" height="126px" style="border-bottom:1px solid #000000;" valign="top" align="right"></td>
<td width="80px" height="126px" style="border-bottom:1px solid #000000; border-right: 1px solid #000000;"></td>
</tr>
<tr>
<td colspan="5" width="520px" height="30px" valign="top" align="left"><p style="padding: 0; margin: 0; font-family: 'Tahoma', sans-serif; font-size: 8px; font-weight: normal; color: #000000;">123</p> </td>
<td colspan="1" width="80px" height="30px" valign="top" align="right"><p style="padding: 0; margin: 0; font-family: 'Tahoma', sans-serif; font-size: 8px; font-weight: bold; color: #000000;">123</p></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td></td>
</tr>
</table>
Hi I have a problem showing in Google Chrome.There is additional line showing in Google chrome, but in IE and in Dreamweaver, there is no such line.
The idea is to give a cell 3 borders. I have highlighted with in the snippet where this problem code is.
Thanks for your help in advance.
HTML snippet
table {
width: 500px;
border-collapse: separate;
table-layout: fixed;
border-spacing: 4px;
border: 1px solid grey;
}
.ArrowCell {
border-bottom: 1px solid red;
border-top: 1px solid red;
border-left: 1px solid red;
border-right: 0;
}
<table>
<tr>
<td rowspan="3"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
<td> </td>
<td bgcolor="#C4E1FF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="4" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> sdf</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>resut1</b></td>
<td rowspan="2">←</td>
<td rowspan="2"> </td>
</tr>
<tr>
<td rowspan="7" class="ArrowCell"> </td>
<td bgcolor="#F0F0F0"> 345</td>
</tr>
<tr>
<td rowspan="5"> </td>
<td rowspan="5"> </td>
<td bgcolor="#C4E1FF"><b>result</b></td>
</tr>
<tr>
<td rowspan="3"> </td>
<td bgcolor="#F0F0F0"> sf</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>rest</b></td>
</tr>
<tr>
<td rowspan="5" class="ArrowCell"> </td> <If I remove the class="", then the whole line will disaapear-->
<td bgcolor="#F0F0F0">sfd</td>
</tr>
<tr>
<td bgcolor="#C4E1FF"><b>result 2</b></td>
<td rowspan="2">←</td>
<td rowspan="3"> </td>
</tr>
<tr>
<td rowspan="5" style="border-left-color:#FFF"> </td>
<td bgcolor="#F0F0F0">4356 </td>
</tr>
<tr>
<td rowspan="4"> </td>
<td rowspan="4"> </td>
</tr>
<tr>
<td bgcolor="#DFFFDF"><b>resultw</b></td>
</tr>
<tr>
<td rowspan="2"> </td>
<td bgcolor="#C4E1FF">avv</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
One solution tried that doesn't work
Add this class to the cell that with additional line.
.ArrowLeft {
border-bottom: 2px solid white;
border-top: 2px solid white;
border-left: 2px solid white;
border-right: 2px solid white;
}
UPDATE
Although OP's problem may seem specialized, this could apply to anyone that has experienced a stubborn border on a table and can't seem to get rid of it.
Add the following to the table:
Table {
border-collapse: separate;
border-spacing: 0;
empty-cells: hide;
}
This is the result: http://jsfiddle.net/zer00ne/0Leqah5r
Try:
.ArrowCell {
border-top: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
border-right: 0 solid transparent;
}
I don't see that extra line in Chrome PC, but when I inspect it with devtools, computed style for .ArrowCell is reported as 0.8px solid black; so I'm guessing that changing it's color to transparent should work.
I just thought of another possibility to your issue. Double check and see if your rowspans might be conflicting by crossing into each other.
Another possible fix is to change border-collapse: separate; to border-collapse: collapse; and maybe border-spacing: 0 as well.
Ive made a new invoice template with the PDF Templates page. How do I make it as if there were two products selected for the invoice? When I try and add $aos_products_quotes_name, it makes two separate tables for two different producst. How can I make it so that two products with their pricing can show up in one table?
Here's the html if you are interested for the template:
<table style="height: 110px; width: 1615px;" border="0">
<tbody>
<tr>
<td>Sarah J Bauling</td>
<td style="text-align: right;"> Tel: 011 705 3201</td>
</tr>
<tr>
<td>1 Jacana Street </td>
<td style="text-align: right;">Fax: 011 705 3203 </td>
</tr>
<tr>
<td>Fourways </td>
<td style="text-align: right;">Cel: 083 457 3402 </td>
</tr>
<tr>
<td>Johannesburg </td>
<td> </td>
</tr>
<tr>
<td>2191</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
<p><strong>Invoice No: $aos_invoices_number</strong></p>
<hr />
<p> </p>
<p> </p>
<table style="height: 58px; width: 1649px;" border="0">
<tbody>
<tr>
<td>To: $billing_account_name</td>
<td style="text-align: right;">Fax: $billing_account_phone_fax</td>
</tr>
<tr>
<td>$billing_account_jjwg_maps_address_c</td>
<td style="text-align: right;">
<p>e.m: $billing_account_email1</p>
</td>
</tr>
<tr>
<td>$billing_account_suburb_c</td>
<td style="text-align: right;">Cel: $billing_account_phone_alternate</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 112px; width: 1637px;">
<tbody>
<tr>
<td>
<p>Date:</p>
</td>
<td>$aos_invoices_date_entered</td>
<td> </td>
</tr>
<tr>
<td style="border-top: 1px solid black;">No:</td>
<td style="border-top: 1px solid black;">Description</td>
<td style="border-top-width: 1px; border-top-style: solid; border-top-color: black; text-align: right;">Balance</td>
</tr>
<tr>
<td style="border-top: 1px solid black;">
<p>$aos_products_quotes_product_qty</p>
</td>
<td style="border-top: 1px solid black;">
<p>$aos_products_quotes_name</p>
</td>
<td style="text-align: right; border-top: 1px solid black;">$aos_products_quotes_product_unit_price</td>
</tr>
<tr>
<td style="border-top: 1px solid black;">
<p>SUB TOTAL:</p>
</td>
<td style="border-top: 1px solid black;"> </td>
<td style="text-align: right; border-top: 1px solid black;">$aos_invoices_subtotal_amount</td>
</tr>
<tr>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;">TOTAL</td>
<td style="border-top: 1px solid black; border-bottom: 1px solid black;"> </td>
<td style="text-align: right; border-top: 1px solid black; border-bottom: 1px solid black;">$aos_products_quotes_product_total_price</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="height: 20px; width: 1621px;" border="0">
<tbody>
<tr>
<td style="text-align: right;">TOTAL AMOUNT DUE (e&eo)</td>
<td style="text-align: right;">$aos_invoices_total_amt</td>
</tr>
</tbody>
</table>
Can you share the HTML after rendering?
Is this HTML from tpl file?
You have to loop through your products array and you need to replicate the
<td>
tag in that loop.
Current HTML for products seems not correct.
I've the below HTML Table. and her i want to get only first row border and the rest only column borders only. as given in the screenshot. please let me know how i can do it in my css.
<table cellspacing="1" class="topbotcol">
<thead>
<tr>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Item</span>
</th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center"> </th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Qty</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Unit</span>
</th>
<th valign="middle" class="colsep rowsep" align="center">
<span class="font-style-bold">Rate $</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">BUILT-UP WATERPROOF MEMBRANE PANEL ROOFING TO FLAT ROOFS AND POOL DECK</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Preparing surfaces: priming and applying “Grims K1” slurry and “Grims Premier K10” waterproof membrane system as specified</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left"> </td>
<td class="rowsep" align="left">
<div class="para">Membrane collars; pointing with epoxy; reinforced with clamp rings around flanges of rainwater outlets</div>
</td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
<td class="rowsep" align="center"> </td>
</tr>
<tr>
<td class="rowsep" align="left">
<div class="para">A</div>
</td>
<td class="rowsep" align="center">
<div class="para">200mm diameter</div>
</td>
<td class="rowsep" align="center">
<div class="para">13</div>
</td>
<td class="rowsep" align="center">
<div class="para">No.</div>
</td>
<td class="rowsep" align="center">
<div class="para">34.28</div>
</td>
<td class="rowsep" align="center">
<div class="para">445.64</div>
</td>
</tr>
</tbody>
</table>
Thanks
table {
border-top: 1px Solid Black;
border-left: 1px Solid Black;
border-bottom: 1px Solid Black;
border-spacing: 0;
}
th, td {
border-right: 1px Solid Black;
}
th {
background-color: lightgrey;
border-bottom: 1px Solid Black;
}
You can use pseudo classes here:
As your table has th for table headers then you can try this:
table.topbotcol tr:first-of-type{
border-bottom:1px solid #ccc; // Will apply border to first row
}
table.topbotcol tr:first-of-type td{
border:none; // will not apply border to tds of first row, and continue after first row
}
You haven't provided detailed description, i think this might help you!
Pseudo-Classes
Docs
:first-of-type
What you need to do is set a border and set the table border to collapse. This will merge the cell borders. Then remove the unwanted top and bottom borders.
table, th, td{
border: 1px solid #000;
}
table {
border-collapse: collapse;
}
td {
border-bottom: none;
border-top: none;
}
Here's a JSFiddle with a fuller example as well as some more optimizations.
Link to JS Fiddle
Suggestions:
don't use valign or align on table cells, use CSS vertical-align and text-align instead
use paragraph tags instead of <div class="para">
use class names that are descriptive of the content, not its style. This helps with maintenance later when you decide that you do not want something to be font-style-bold anymore. It is easier to change <th> in the CSS than it is to change it in the CSS and THEN go back and change ALL font-style-bold to font-style-normal in your HTML.
You can achieve that by setting the border on the td and th cells, but making the border-top and border-bottom none for the td, but then setting surrounding border of the entire table as well.
The following css is an example:
table {
border-collapse:collapse;
border: 1px solid #000;
}
th {
background-color: #ccc;
border-left: 1px solid #000;
border-bottom: 1px solid #000;
padding: 5px;
}
td {
border-left: 1px solid #000;
padding: 5px;
}
Link to JS Fiddle
Try this
http://jsfiddle.net/aYCjA/
.tbl {
border: 1px solid black;
border-collapse: collapse;
min-width: 300px;
text-align: center;
}
.tbl th, .tbl td {
padding: 2px 5px;
}
.tbl td {
border-left: 1px solid black;
border-right: 1px solid black;
}
.tbl th {
border: 1px solid black;
}
The important thing here is border-collapse: collapse. This attribute prevents showing duplicate borders in sibling cells.