Is there a possibility to have a visual separator between two lines (tr) in an HTML table.
I tried with a <br> but this is not valid code.
I tried do add a padding-top to the tr after the break but it does not work.
Currently I use an empty line:
<tr><td colspan=\"X\"> </td></tr>
but I don't think this is the best solution, especially as I have to make sure the colspan is adjusted if there is a change is the number of columns.
Is there any way to solve this?
Edited to reflect my re-reading the question rather than the title of the question (original answer remains below the rule).
If you want a visual separator (rather than simply white-space) then simply use:
td {
border-bottom: 1px solid #ccc; /* or whatever specific values you prefer */
}
The only way to increase spacing between table rows, that I'm currently aware of, is to use padding on individual rows/cells:
td {
padding: 0.5em 1em;
border: 1px solid #ccc;
}
JS Fiddle demo
Although there is the potential to use transparent (or background-color-ed borders):
table {
border-collapse: separate;
}
td {
border-top: 0.5em solid transparent;
border-bottom: 0.5em solid transparent;
}
td:hover {
border-color: #ccc;
}
JS Fiddle demo
The <tr /> element is not stylable in all browsers however you could always add the padding or a bottom-border to the cells within the tr.
Actually, I use separate trs for this purpose all the time. I style them (e.g. the one td within) via a separator class.
About the colspan-problem see Colspan all columns.
Related
Related Question
The above question is similar. But I wanted to know if the right borders can be made continuous?
How do I get the gaps between the vertical lines to disappear and make it look like a continuous line?
Also, I have to use inline CSS styling. Can't work with external CSS or style tags within head either.
You can achieve that by doing this
table {
border: none;
border-collapse: collapse;
}
td {
border: none;
border-right: solid 1px #333;
padding: 10px;
}
tr td:last-of-type {
border: none;
}
Click to see working example
I've come across a very strange issue with the latest version of DOMPDF (0.6.0 Beta 3). I'm using it to create invoices for customers on my site. The design calls for 1px borders between the table cells. If I use either black or #000 for the border color, the tables are rendered nicely. However, when I change the color, to say #CCC for example, instead of a 1px border, the borders become 2px. I'm using border-collapse:collapse and I've been pulling my hair out over this for 2 days. I'm not changing anything else except the color, yet the border thickness is changing. Has anyone else run across this issue and know what the solution is or have any suggestions? Why does black render a 1px border but other colors are rendered as 2px borders? Help!
Edit: I also have empty cells filled with as I read that that may cause issues with tables, but still no luck.
This might help. I have not tried to reproduce your problem, but I know it helped with some issues I was having with tables.
try adding this to your css for the table:
table {
border-collapse: collapse;
}
Obviously you can use the appropriate selector in the css and not define the entire table class.
I was having the exact same problem. It's caused from the table having its own border and the cells having their own borders. Here's how I fixed it:
table {
border-left: 0.01em solid #ccc;
border-right: 0;
border-top: 0.01em solid #ccc;
border-bottom: 0;
border-collapse: collapse;
}
table td,
table th {
border-left: 0;
border-right: 0.01em solid #ccc;
border-top: 0;
border-bottom: 0.01em solid #ccc;
}
If anyone facing problem with borders of multiple tables in a row
Replace This
table{ border:collapse; }
with
table{ border-spacing: 0; }
Reference link
I've seen some improvement by setting border thickness to 0.01em
Use border-spacing: -1px;
Instead of border-collapse: collapse;
I need to get rid outer border, just cells border and there should be space between cells . I can't get why it builds this outer border around the table, I just tried this code in separate file
table {
border-collapse: separate;
border-spacing: 4px;
}
table td, table th {
border: 1px solid black;
}
and it display correctly. But on website content it make this outer border. Can somebody help me?
Just do in your css:
.tribe-events-calendar
{
border: 0px!important;
}
OR
#big
{
border: 0px!important;
}
Or, if it's already there the class or id, modify these values to set them as said. Beware the class, because supposedly it should affect other elements.
Reading again your question, if you set it in a different stylesheet it could happen that it overwrites the values of the 0px with the values of the Npx from the other sheet. Merge them into one, or, if you cannot, put the !important; mark after the css that says 0px.
If nothing works, embed (not include) it at the beginning of your file. Last and least (read: NOT ADVISABLE), use inline css.
I tried to add this: "border: none;" to the table element itself inside the HTML and it worked.
I think your problem is this:
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBB;
}
It overrides your css.
Use chrome's "inspect element" or firebug for Firefox to see the problem.
You Just need to change only one place that is,
Original Code
table.tribe-events-calendar, .tribe-events-calendar td {
border: 1px solid #BBBBBB;
After Modification
table.tribe-events-calendar td {
border: 1px solid #BBBBBB;
You can use Firefox FireBug for inspect and do Live edits for CSS and Jquery.
I just need to show my plain html table in which it shows only lines of rows and hide columns in it, so that the another person seeing it, thinks it as a table with one column, but actually it has multiple columns...I cant use colspan, as I need columns as itself...
Please help
thanks..
Turn the border off on your: <table border="0" class="thisTable">, and give it a class like the example. Then add the following lines to your CSS:
table.thisTable {
border-bottom:1px #000 solid;
// edit:
border-spacing:none; // you need this to take away spacing you still see
border-collapse:collapse; // you need this to take away spacing you still see
}
table.thisTable td {
border-top:1px #000 solid;
}
This will add a border at the top for each td and end the table off with a bottom border.
Hope this helps.
//edit:
Add a class to the first and last <td> of each <tr> and define the following in your CSS as well:
table.thisTable td.first {
border-left:1px #000 solid;
}
table.thisTable td.last {
border-right:1px #000 solid;
}
This will round the borders off nicely along the edges of the table.
Use CSS to style your table:
td {
border-bottom: 1px;
border-top: 1px; /* optional, you will have to play with the formatting */
border-left: none;
border-right: none;
}
This will give a top and bottom border to each data cell, which should do what you need it to. Play a little with the formatting to make sure you get it right.
I have a simple html table like this: http://jsbin.com/oxiyi
I want to have a border with color #990000 outside the entire table. So I have made a table outside the table and given it border color of #990000. But still I dont see a border color.
Use the border property with CSS style and give it the color. I got rid of the nested tables in your example as well.
<style>
td {
border: solid 2px lightgrey;
}
</style>
<table style="border: 5px solid #990000; border-collapse: collapse">
http://jsbin.com/odici
That preserves your borders on your cells...
Tables inside tables! Oh noes! My head hurts.
You should be glad that doesn't work, as it is awful markup and should be avoided at all costs. Looking at your HTML code I am noticing a lot of inline properties being set and lack of CSS being used. You should really read up on CSS, as the code you have right now looks more like the code that was being produced in 2000 rather than what we're doing nowadays. In short, however, you can get rid of your outer table and add a style declaration of border: 1px solid #990000; in the table to get the effect you want. This is just the tip of the iceberg, however, and you really should read up on CSS and valid markup before your website self implodes. :)
Probably because the outer table has border set to 0
Change border =0 to border=1
A better method would be to remove the outer table and add the border via CSS:
<table ... style='border: 1px solid #900'>
Better still, use an external stylesheet to style the table.
Several problems:
A <div> would be a better tool for
this job
Your outer table has bgcolor
specified, not bordercolor
Your outer table has border set to
0
You need to also include a <tr>
and <td> around the inner table to
make your HTML correct
Like this:
<table name='outerTable'>
<tr>
<td>
<table name='innerTable'>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
You need to add two styles to the code:
Added "border-collapse: collapse" style to table tag
Added "border: 1px solid gray" style to all td tags
table {
border-collapse: collapse;
}
table tr td {
border: 1px solid gray;
}
border-collapse: collapse
}
Try using the following code
tr .bordered{
border-bottom:1px solid #000;
}
the while calling it use
<tr class="bordered"></tr>
I can't tell you exactly why your tables are not interacting correctly without seeing your markup, but I do see a problem with your fundamental approach.
Instead of another table, wrap your table in a DIV tag like this:
<div style="border:solid 1px #990000;">
<your table>
</div>
This better adheres to modern standards for HTML/XHTML.
Without seeing your code, I can't tell you whether your inner table adheres to best practices or not.
Hope this helps
Create one custom css file in '/css ' dir, say 'local.css'
Add following code in marinelli.info file.
stylesheets[all][] = css/local.css
Try adding following css code in your custom css (i.e. local.css) file :
tbody {
border-top: 1px solid #CCC;
}
tr, tr.even {
background: #dedede;
}
table tr th {
background: #757575;
}
tr td, tr th {
border: 1px solid white;
}
table tr th, table tr th a, table tr th a:hover {
color: white;
}
Please clear cached data here- /admin/config/development/performance
Rgrds,