I'm trying to make the border and background of a table to go around the caption tag, rather than excluding it for accessibility reasons. I was it to display similar to a th tag.
I've tried to add and remove borders, but the border and background styles are in a stylesheet I don't want to alter (or duplicate), making this challenging.
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="2">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>
Example:
.border-background-stylesheet {
border:#222222;
background:#00EE00;
}
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th colspan="100">What I want caption to look like</th></tr>
<tr><td>Data cell</td><td>Data cell</td></tr>
</table>
This appears to fulfil the requirement:
Basically, border the whole table, then remove it from the top.
Next, border the whole caption, then remove it from the bottom.
Result? Two blocks that appear as just one.
.border-background-stylesheet
{
background:#00EE00;
border: solid 1px black;
border-top: none;
}
caption
{
background:#00EE00;
border: solid 1px black;
border-bottom: none;
}
<table class="border-background-stylesheet">
<caption>Caption</caption>
<tr><th>What I want caption to look like</tr></th>
</table>
Related
I'm trying to create a "wall" as in linkedin and I'm doing that by creating a long table. I've changed background color and table color to give contrast. My issue is that I can't separate my table rows so that the background color shows between them.
All of the examples I find use
<table style="border-collapse: separate;border-spacing:0 1rem;">
How do I color in the spacing to match the background?
Or are there better ways of solving this?
You can't do it exactly the way you want. Your options are:
add padding to every cell in the desired row: tr.this-one td { padding-bottom: 1em;}. This will use cells' background color.
add thick border to every cell in the desired row: tr.this-one td { border-bottom: 1em solid red;}. This will use border color you set, which you can make to match the background color you have.
add a row in the markup: <tr><td colspan="10"></td></tr> and style it the way you'd like. You can also have <thead>/<tfoot>/multiple <tbody> elements inside a table as a way to semantically group rows (but they're not styleable by themselves).
Hi
Maybe this will help. I put table into a div container and set it background. Then if you need to have another color between rows just change background-color property of table, because now is transparent should be same as container background.
table {
border-collapse: separate;
border-spacing: 0rem 1rem;
background-color: transparent;
border: 1px solid yellow;
}
tr {
background-color: tomato;
}
td {
padding: 5px;
}
.container {
display: flex;
justify-content: center;
background-color: royalblue;
}
<div class="container">
<table>
<tr>
<td>mallard</td>
<td>colorful</td>
</tr>
<tr>
<td>dog</td>
<td>piebald</td>
</tr>
<tr>
<td>fox</td>
<td>foxy</td>
</tr>
</table>
</div>
Cheers
I'm using a master page and I have a table that I want to show a border around so that it shows around each cell in the table. Here's the code I'm trying to put a border around:
<table class="mainTable" style="border-color:#DDDDDD;">
<tr>
<td class="masterBannerTop" colspan="6" >
<img style="border: none; display: block; margin: 0 auto;" alt="Travel Joan's Blog Banner" src="Website%20Photos/HeadBanner.jpg" />
</td>
</tr>
<tr>
<td class="masterBannerNav">HOME</td>
<td class="masterBannerNav">ABOUT ME</td>
<td>
... And it goes on from there. Here's the CSS:
.mainTable
{
width: 90%;
margin-left: 5%;
margin-right: 5%;
border-spacing: 30px;
border-color:#999999;
}
No matter what color I put in, it doesn't work in any of the browsers. I mean, there's only a couple places where I can put the color. Even if i try to use just CSS or in-line style elements, it still doesn't seem to want to work.
try setting
border:1px solid #999999;
in your css instead of fiddling around with table attributes! Try to avoid using these attributes because it makes changing the style of your site more difficult and the code more verbose for people that have to maintain it. Good luck and let me know how it goes :)
style="border: 1px solid black"
Perhaps also make sure you set border-width: 1px or something along those lines?
Do
<table border="1"> ... </table>
to get borders around your table and between cells.
Do
<table style="border:'1px solid #DDDDDD'"> ... </table>
or
.mainTable {
border:'1px solid #DDDDDD';
...
}
or
.mainTable {
border-size:1px;
border-style:solid;
...
}
to get borders around your table.
I need help in this:
if i try to integrate this on a newsletter mailchimp the lines goes down here is the screenshot:
http://i197.photobucket.com/albums/aa253/tintingerri/Test/pic4.png
can someone help me why is this happening?
if I test this in a textpad it looks good, and if I try to put the code now in mailchimp, it the lines are reformatted. any idea?
thanks
Add
border-top: 1px solid #000;
To the style attribute for the <td> tags.
You can change the color to anything you want obviously and you may want to look into using external CSS stylesheets.
Something like:
td { border-top:2px solid #fb0 }
td { padding-left:25px; padding-bottom:10px; padding-top:10px; width: 30% }
tr.alt { background: #ffc }
the row to have the background will use
<tr class="alt">
it is also common practice to put all the style in a css file or in the separate <style> tag region.
sample: http://jsfiddle.net/2LXUn/2/
If you want a table, with only border at the top, the following will work.
<table style="border-color:#008000;border-style: solid none none none;border-width:2px; width: 100%">
<tr> <td > row1</td>
</tr> <tr >
<td>row2</td> </tr>
</table>
You may also apply the border style to table rows as required.
I have a table with multiple tbody's, each of which has a classed row, and I want it so that the classed row in the first tbody has style differences, but am unable to get tbody:first-child to work in any browser. Perhaps I am missing something, or maybe there is a workaround.
Ideally, I would like to provide the programmers with a single tbody section they can use as a template, but will otherwise have to add a class to the first tbody, making for an extra test in the programming.
The html is straightforward:
<tbody class="subGroup">
<tr class="subGroupHeader">
<th colspan="8">All Grades: Special Education</th>
<td class="grid" colspan="2"><!-- contains AMO line --></td>
<td><!-- right 100 --></td>
</tr>
<tr>...</tr> <!-- several more rows of data -->
</tbody>
There are several tbody's per table. I want to style the th and td's within tr.subGroupHeader in the very first tbody differently than the rest. Just to illustrate, I want to add a border-top to the tr.subGroupHeader cells.
The tr.subGroupHeader will be styled with a border-top, such as:
table.databargraph.continued tr.subGroupHeader th, table.databargraph.continued tr.subGroupHeader td {
border-top: 6px solid red;
}
For the first tbody, I am trying:
table.databargraph.continued tbody:first-child tr.subGroupHeader th {
border-top: 6px solid blue ;
}
However, this doesn't seem to work in any browser (I've tested in Safari, Opera, Firefox, and PrinceXML, all on my Mac)
Curiously, the usually excellent Xyle Scope tool indicates that the blue border should be taking precedence, though it obviously is not. See the screenshot at http://s3.amazonaws.com/ember/kUD8DHrz06xowTBK3qpB2biPJrLWTZCP_o.png
This screenshot shows (top left) the American Indian th is selected, and (bottom right), shows (via black instead of gray text for the css declaration), that, indeed, the blue border should be given precedence. Yet the border is red.
I may be missing something fundamental, like pseudo-classes not working for tbodys at all... This really only needs to work in PrinceXML, and maybe Safari so I can see what I'm doing with webkit-based css tools.
Note I did try a selector like tr.subGroupHeader:first-child, but such tr's apparently consider the tbody the parent (as I would suspect), thus made every border blue.
Thanks...
Sorry folks, but I'm gonna answer my own question. But I do appreciate the help.
Instead of:
table.databargraph.continued tbody:first-child tr.subGroupHeader th {
border-top: 6px solid blue ;
}
What I should have done was:
table.databargraph.continued > tbody:first-of-type tr.subGroupHeader th {
border-top: 2px solid blue !important ;
}
Is the tbody really the first child of the table? If there is any other element that is an earlier sibling (e.g. a thead?) than this will not work.
I've tried the following test code and it seems to work:
<html>
<head>
<style type="text/css">
table tbody tr th {
border-top: 6px solid red;
}
table tbody:first-child tr th {
border-top: 6px solid blue;
}
</style>
</head>
<body>
<table>
<tbody>
<tr><th colspan="2">Title</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
<tbody>
<tr><th colspan="2">Title</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
<tbody>
<tr><th colspan="2">Title</th></tr>
<tr><td>Data</td><td>Data</td></tr>
</tbody>
</table>
</body>
</html>
When adding a thead element, this stops working, because there is no tbody that is the first child of the table. What does seem to work in that case (at least in Opera) is the following:
table thead + tbody tr th {
border-top: 6px solid blue;
}
This selects all tbody that directly follow a thead.
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,