So I'm using a GridView and it should look like this, but it doesn't really work.
How do I need to use the CSS to make it look like that. And I'm using a SqlDataSource so I can't customize every td or tr.
You can use what Mr Lister says, unless you need support for IE8 too. Then use the following in your CSS file for the vertical lines except first:
.yourClassName th + th,
.yourClassName td + td
{
border-left: thin solid black;
}
For your horizontal lines use something like this (depending on how you do border-collapse do it or tr or td):
.yourClassName tr + tr td
{
border-top: thin solid black;
}
Related
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.
I have stuck in a point when I convert a psd to html/css
The page is this : http://valogiannis.com/freelancer/neurosport/editdetails.html
Below the title "Edit Account Details" I have a table to show the user data.
I have I have the following rule for the rows
#editAccountDetails tr {
border-bottom:#cdd3e0 solid 1px;
border-top:#fff solid 1px;
line-height:3;
}
As you can see in the page the blue bottom-border overlap the white border-top. I get the same result in all browser so I suppose is normal behavior and it's something that I can't understand.
What I want to achieve is the border-bottom to be exactly above the white border-top. Any suggestion?
P.S Something else that would help me if you know. How can I make the border-bottom don't appear for the latest row and border-top for the first row? I think it's something like tr + tr {... } but I don't remember exactly.
The reason you cant see your borders is because this is in your reset.css
table {
border-collapse: collapse
}
add in this to your css
#editAccountDetails table {
border-collapse: seperate
}
You will also need to remove the borders from the tr to the td
#editAccountDetails td {
border-bottom:1px solid #CDD3E0;
border-top:1px solid #FFFFFF;
}
And the selector for the first row is:
#editAccountDetails tr:first-child {color:blue}
And the selector for the last row is: (last row doesnt work in ie)
#editAccountDetails tr:last-child {color:blue}
table {
border-collapse: collapse
}
try this
Simply put borders on the TD instead of TR and all will be well :-)
#editAccountDetails tr td {
border-bottom:#cdd3e0 solid 1px;
border-top:#fff solid 1px;
line-height:3;
}
How do I set the "inner border" - the border between different cells.
By setting style attributes I manage to control the outer border, but the inner border just stays the same gray color and the same width. What attributes should I tweak to control the inner border?
For ordinary table markup, here's a short solution that works on all devices/browsers on BrowserStack, except IE 7 and below:
table { border-collapse: collapse; }
td + td,
th + th { border-left: 1px solid; }
tr + tr { border-top: 1px solid; }
For IE 7 support, add this:
tr + tr > td,
tr + tr > th { border-top: 1px solid; }
A test case can be seen here: http://codepen.io/dalgard/pen/wmcdE
You need to style the <td> element.
Take a look at the W3C website
I am using Firefox 3.5.7 and I have the same CSS used in multiple HTML tables, but there are some examples where parts of the borders are not shown.
What makes no sense to me is that the same CSS on the same page for another HTML table works fine. Also, the same page in Internet Explorer looks fine from a border point of view.
Here is an image with an example, as you can see in this case the bottom of the first table is missing a border.
Does anyone have a clue why this would happen here?
Maybe you've zoomed in/out a bit. This can happen either accidently or knowingly when you do Ctrl+Scrollwheel. Maybe it isn't completely resetted to zoom level zero. This mis-rendering behaviour is then recognizeable at some websites, also here at SO.
To fix this, just hit Ctrl+0 or do View > Zoom > Reset to reset the zoom level to default.
This is Firefox/Gecko bug 410959. This affects tables with border-collapse:collapse. It's from 2008 and there's no real progress on it, so you'll probably need to find a workaround. One way is using border-collapse:separate and fiddling with borders on a per-cell basis.
I found a similar problem when zoomed out in Firefox on an application I am working on.
The main cause was having the CSS border-collapse property set to collapse.
Changing it to separate instead fixed the problem. However, that meant I did have to rethink the way borders are applied to various parts of the table, because otherwise your borders will appear to double in thickness. I ended up having to use jQuery to give a special "last" class to the last td or th in each tr, and to the last tr in the table. My query was something like:
$('table tr > th:last-child, table > tbody > tr > td:last-child, table > tbody > tr:last-child').addClass('last');
My CSS rules were similar that:
table
{
border-collapse: separate !important;
}
table tr, table th, table td
{
border-right-width: 0;
border-bottom-width: 0;
border-left: 1px solid black;
border-top: 1px solid black;
}
table td.last, table th.last
{
border-right: 1px solid black;
}
table tr.last td
{
border-bottom: 1px solid black;
}
table
{
border: 0;
}
I did end up using browser targeting so that I only applied these rules to Firefox users, but it may work for all browsers, I haven't tested.
Building on the good answer of #GregL (I seem unable to "comment" directly on it):
Instead of using JQuery to generate a "last" class, I simply used the built-in pseudo-element selector :first-child. I built rules selecting tr:first-child and td:first-child that define border-top and border-left (instead of border-right and border-bottom as in GregL's answer). The generic rules define border-right and border-bottom instead of border-left and border-top. :first-child is said to be supported in Chrome v. 4.0, Firefox v. 3.0, IE 7.0, Safari v. 3.1, and Opera v. 9.6 (). Tested on Firefox v. 40.0.3, where I saw this problem in the first place.
This was caused by the table (with a missing bottom-border) to be inside a div...The border apparently didn't get calculated in the table height, so the border was there but wasn't shown.
Giving the surrounding div a margin-bottom from 1px solved the problem.
Just use border-spacing:0; hope this will solve your problem.
Border started going missing when browser zoom was increased. I was able to solve it by doing the following. Tested in Chrome and Firefox.
padding: 0.5px !important
I had the same problem with missing table border.
My solution is:
table{
border-collapse: collapse !important;
border-spacing: 0px;
border: 1px solid #DDD;
}
And border for table rows:
table tr{
border-bottom: 1px solid #DDD !important;
}
I am using Bootstrap either in my layout and the table has also bootstrap css classes like "table table-striped table-bordered"
This solution works for me, when I tried solution with
border-collapse: separate !important;
it didn't work properly for me.
worked for me realisation of answer #Donald Payne
*( .table - bootstrap class )
table.table {
border-collapse: separate !important;
}
table.table tr,
table.table th,
table.table td {
border-right-width: 0 !important;
border-bottom-width: 0 !important;
border-left: 1px solid #DDD !important;
border-top: 1px solid #DDD !important;
}
table.table td:last-child,
table.table th:last-child {
border-right: 1px solid #DDD !important;
}
table.table tr:last-child td {
border-bottom: 1px solid #DDD !important;
}
table.table {
border: 0 !important;
}
table.table thead tr:last-child th,
table.table thead tr:last-child td {
border-bottom: 1px solid #DDD !important;
}
table.table tbody tr:first-child th,
table.table tbody tr:first-child td {
border-top-width: 0 !important;
}
This is a bit tangential, but for those searching for missing borders in Firefox…
I had a border-bottom of a table-row (<tr>) that was missing where a background had been set on a specific cell. It turned out this was caused by a rogue position: relative on the cell, removing that (or changing it to position: inherit) fixed it.
Firefox 70.0.1
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,