I am trying to separate my tablet but I cannot add the dividing line, if I put style = "border: 1px solid black in tr it appears to me but not in the way I want.
The code is the following:
<template id="diario_report">
tr.border_bottom td {
border-bottom:1px solid black;
}
</style>
<table style="border:1px solid black;border-collapse:collapse;width:100%" cellspacing="0">
<tbody style="border: 1px solid black">
<tr>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Fecha</strong></td>
<td colspan="2" style="border:1px solid black;width:20%;text-align:center"><strong>Cuentas</strong></td>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Debe</strong></td>
<td style="border:1px solid black;width:20%;text-align:center"><strong>Haber</strong></td>
</tr>
<t t-foreach="docs" t-as="val">
<tr>
<td style="text-align:center"><t t-esc="val.get('fecha')"/></td>
<td style="text-align:center"><t t-esc="val.get('titulo')"/></td>
<td></td>
<td style="text-align:center"><t t-esc="val.get('total_debe')"/></td>
<td></td>
</tr>
<tr>
<td></td><td></td>
<td style="text-align:center"><t t-esc="val.get('cuenta_haber')"/></td>
<td></td>
<td style="text-align:center"><t t-esc="val.get('total_haber')"/></td>
</tr>
</t>
</tbody>
I want it to be like this
I had a problem like this before. I don't think tr can take a border styling directly. My workaround was to style the tds in the row:
CSS:
tr.border_bottom td {
border-bottom:1pt solid black;
}
Also add cellspacing="0" as an attribute to <table>.
and give it style.
Related
I need to make a div with a solid border. I have a good start but having some trouble getting the alignment right and getting the lines working. Below is an image of the requested HTML
So far I think I'm some what close with my HTML but my two top lines do not match and I cant get the vertical line in.
code:
<div style="width:60%;border:solid">
<div style="width:45%; display: inline-block;">
<div style="margin-left:5px;">
Domestic Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$25..01 to $50.00..add $7.95 <br>
$50.01 to $75.00...add $11.95 <br>
$75.01 to $100.00...add $13.95 <br>
$100.01 to $150.00...add $17.95 <br>
$150.01 to $200.00 .. add $19.95 <br>
200.01 – above.. add $23.95
</div>
</div>
<div style="width: 8%; display: inline-block;"><hr style="width: 1px; height: 100px;"></div>
<div style="width:45%; display: inline-block;">
Canada, AK, HI, PR Shipping and Handling<br>
<hr style="width: 5px;"/><br>
$.01-$25.00.. add $14.95<br>
$25.01 - $50.00.add $15.95<br>
$50.01 to $75.00...add $18..95<br>
$75.01 to $100.00...add $20.95<br>
$100.01 to $150.00..add $25.95<br>
$150.01 to $200.00..add $28.95<br>
$200.01 to above....add $32.95
</div>
</div>
Here is what my HTML looks like on the web page currently:
I'm currently missing the vertical line, top headers are not aligning and bottom texts are not aligning. Originally this was using a table which is fine but now we want it to be responsive and to use div's. I also can not use css. I would prefer to use css personally but that request was denied.
You should probably build this using html tables. See here for further help.
<style>
table,
th {
border: 1px solid black;
border-collapse: collapse;
}
td {
border-right: 1px solid black;
}
</style>
<table>
<tr>
<th>Domestic Shipping and Handling</th>
<th>Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td> $25..01 to $50.00..add $7.95 </td>
<td> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td>$50.01 to $75.00...add $11.95</td>
<td>$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td>$75.01 to $100.00...add $13.95</td>
<td>$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td>$100.01 to $150.00...add $17.95</td>
<td>$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td>$150.01 to $200.00 .. add $19.95</td>
<td>$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td>200.01 – above.. add $23.95</td>
<td>$150.01 to $200.00..add $28.95</td>
</tr>
</table>
Thank you so much for your post. I used your code and adjusted it a little to get my answer but your code is better then mine. Here is my code after adjustments:
<table style="border: 1px solid black;">
<tr>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Domestic Shipping and Handling</th>
<th style="border: 1px solid black; border-collapse: collapse; padding:5px;">Canada, AK, HI, PR Shipping and Handling</th>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;"> $25..01 to $50.00..add $7.95 </td>
<td style="padding:5px;"> $.01-$25.00.. add $14.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$50.01 to $75.00...add $11.95</td>
<td style="padding:5px;">$25.01 - $50.00.add $15.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$75.01 to $100.00...add $13.95</td>
<td style="padding:5px;">$50.01 to $75.00...add $18..95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$100.01 to $150.00...add $17.95</td>
<td style="padding:5px;">$75.01 to $100.00...add $20.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">$150.01 to $200.00 .. add $19.95</td>
<td style="padding:5px;">$100.01 to $150.00..add $25.95</td>
</tr>
<tr>
<td style="border-right: 1px solid black; padding:5px;">200.01 – above.. add $23.95</td>
<td style="padding:5px;">$150.01 to $200.00..add $28.95</td>
</tr>
</table style="border: 1px solid black;">
Hope it helps someone else. I added padding as well to this because the other version was really close together and hard to read.
I am trying to embed the html table in to email I am sending from one the application I am building below is what I am trying
<table width="400" style="border:1px solid #333">
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
The table in the email looks like this
How can I put everything in the Cell inside the table and align them.
After edit
Try to set style="vertical-align: middle" for each cell (since valign="middle" is obsolete).
<table style="border-collapse: collapse; width: 400px">
<tr>
<th style="border: 1px solid #333; vertical-align: middle">Isolate Lots</th>
<th style="border: 1px solid #333; vertical-align: middle">Identification</th>
</tr>
<tr>
<td style="border: 1px solid #333; vertical-align: middle">name</td>
<td style="border: 1px solid #333; vertical-align: middle">jax_trait_isolateIdentification</td>
</tr>
</table>
Upd: added borders
You did not specify what kind of alignment you mean, so here's my suggestion in case you want them centered, just added a 'align="center"' style to the cells.
<table width="400" style="border:1px solid #333">
<tr>
<th align="center">Isolate Lots</th>
<th align="center">Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td align="center">$LOTS[$foreach.index].name</td>
<td align="center">$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</table>
well your code is correct maybe u should try this
i just change the style of your table
hope it works. enter code here
<table width="400" border='1px' style='text-align:center'>
<tr>
<th>Isolate Lots</th>
<th>Identification</th>
</tr>
#foreach( $sample in $SAMPLES)
#if($EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification") !="Unidentified")
<tr>
<td>$LOTS[$foreach.index].name </td>
<td>$EXPSAMPLES[$foreach.index].getData("jax_trait_isolateIdentification")
</td>
</tr>
#end #end
</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.
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.
I'm currently stuck setting borders in an html table. (I use inline styles for a better rendering in e-mail-clients) I have this piece of code:
<html>
<body>
<table style="border: 1px solid black;">
<tr>
<td width="350" style="border: 1px solid black ;">
Foo
</td>
<td width="80" style="border: 1px solid black ;">
Foo1
</td>
<td width="65" style="border: 1px solid black ;">
Foo2
</td>
</tr>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;">
Bar1
</td>
<td style="border: 1px solid black;">
Bar2
</td>
<td style="border: 1px solid black;">
Bar3
</td>
</tr>
<tr style="border: 1px solid black;">
<td style="border: 1px solid black;">
Bar1
</td>
<td style="border: 1px solid black;">
Bar2
</td>
<td style="border: 1px solid black;">
Bar3
</td>
</tr>
</table>
</body>
</html>
It is rendered like this:
I want the table to be rendered like Excel would render a table, with inner and outer border:
table {
border-collapse:collapse;
}
This is quick-and-dirty (and not formally valid HTML5), but it seems to work -- and it is inline as per the question:
<table border='1' style='border-collapse:collapse'>
No further styling of <tr>/<td> tags is required (for a basic table grid).
Add cellpadding and cellspacing to solve it.
Edit: Also removed double pixel border.
<style>
td
{border-left:1px solid black;
border-top:1px solid black;}
table
{border-right:1px solid black;
border-bottom:1px solid black;}
</style>
<html>
<body>
<table cellpadding="0" cellspacing="0">
<tr>
<td width="350" >
Foo
</td>
<td width="80" >
Foo1
</td>
<td width="65" >
Foo2
</td>
</tr>
<tr>
<td>
Bar1
</td>
<td>
Bar2
</td>
<td>
Bar3
</td>
</tr>
<tr >
<td>
Bar1
</td>
<td>
Bar2
</td>
<td>
Bar3
</td>
</tr>
</table>
</body>
</html>