I am using the colgroup tag to style a column in my html table. However, using border-radius, -webkit-border-radius and -moz-border-radius does not work...Does colgroup support border radius or do I need to apply classes to the individual cells?
HTML:
<table>
<colgroup align="right"></colgroup>
<colgroup class="priceCol" align="right"></colgroup>
<tr><td>1 Session:</td><td>R20</td></tr>
<tr><td>5 Sessions:</td><td>R100</td></tr>
<tr><td>10 Sessions:</td><td>R180</td></tr>
<tr><td>15 Sessions:</td><td>R250</td></tr>
</table>
CSS;
.priceCol{
background: #ff0000;
border: 1px solid #333;
padding-left: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Thank you
It is the individual table cells (or the entire table itself) that has the borders, so applying a border-radius to a column wouldn't have any effect anyway (it'd be like specifying a border-radius on a container <div> when it's the contained one that has the border).
You will need to apply classes to the individual cells to achieve the effect you want.
Related
What I'm trying to do
I'm trying to implement a table header with a border and drop shadow, and have it include padding on the table head.
What I've tried
I gave the div that wraps the table a padding of .75em and when I added a drop-shadow and border to the thead, it did not go around the padding (expected). It did produce the effect I was going for, just there is still padding around the thead that I would like to be included with this effect.
Next I tried moving the .75em padding to the thead and tbody, but it is not working as intended. Inspecting says padding has no effect on internal table elements except cells.
Next I tried to wrap the content inside the thead in a div and give that a padding of .75em, but that did not work.
Next I tried to wrap the content outside the thead in a div and give that a padding of .75em, but that did not work either.
My DOM looks like this
<div class='spreadsheet'>
<table class='data'>
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
What I'm trying to achieve:
Not sure to understand what you want, but is it working for you?
.spreadsheet{
background:lightblue;
padding:0.75em;
}
table {
border-radius: 5px;
box-shadow: 2px 2px 5px lightgray;
border-spacing: 0;
background:white;
}
th {
padding: 20px;
}
thead {
border-radius: 5px;
box-shadow: 2px 2px 5px lightgray;
}
tbody {
margin-top: 50px;
padding-top: 20px;
}
As a temporary solution I've added blank rows and columns to each side and gave them a height and width respectively of the padding size. This causes problems with hovering and makes things more complicated than they probably need to be.
Why does this work?
<table border=1>
And this doesn't?
<table style="border-width:1px;border-color:black">
I get the same result in Chrome and in IE9.
Doing borders on tables with css is a bit more complicated (but not as much, see this jsfiddle as example):
table {
border-collapse: collapse;
border: 1px solid black;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td>test</td>
<td>test</td>
</tr>
</table>
The default border-style is none, so you must specify that as well as the width and the colour.
You can use the border shorthand property to set all three values in one go.
Also, the border attribute describes the border for the table and the cells. CSS is much more flexible so it only describes the border of the elements you are selecting. You need to select the cells too in order to get the same effect.
table, th, td {
border: solid black 1px;
}
See also border properties and tables in CSS.
The reason it didn't work is that despite setting the border-width and the border-color you didn't specify the border-style:
<table style="border-width:1px;border-color:black;border-style:solid;">
JS Fiddle demo.
It's usually better to define the styles in the stylesheet (so that all elements are styled without having to find, and change, every element's style attribute):
table {
border-color: #000;
border-width: 1px;
border-style: solid;
/* or, of course,
border: 1px solid #000;
*/
}
JS Fiddle demo (Or using shorthand border notation).
<table style='border:1px solid black'>
<tr>
<td>Derp</td>
</tr>
</table>
This should work. I use the shorthand syntax for borders.
You need to add border-style like this:
<table style="border:1px solid black">
or like this:
<table style="border-width:1px;border-color:black;border-style:solid;">
Like this:
border: 1px solid black;
Why it didn't work? because:
Always declare the border-style (solid in my example) property before the border-width
property. An element must have borders before you can change the
color.
<table style="border: 5px solid black">
This only adds a border around the table.
If you want same border through CSS then add this rule:
table tr td { border: 5px solid black; }
and one thing for HTML table to avoid spaces
<table cellspacing="0" cellpadding="0">
What is the best way to create a curved border around the table?
Using border-radius property simply puts a curved border around the outer part of the table. However, the individual cells generate a dual border.
<table class="round" with="100%" height="200">
<tr>
<td>Text</td>
</tr>
</table>
Its css is defined as
.round{
border: 1px solid black;
border-radius: 20px;
}
This will just generate a rounded table with no border around the cells. If we try to generate a border around the cells by putting
.round td{
border: 1px solid black;
}
We then get a dual border.
Is there a workaround?
Put a border-radius on the corner cells instead.
.tr:first-child .td:first-child{
border-top-left-radius: 20px;
}
.tr:first-child .td:first-child{
border-top-right-radius: 20px;
}
.tr:last-child .td:first-child{
border-bottom-left-radius: 20px;
}
.tr:last-child .td:first-child{
border-bottom-right-radius: 20px;
}
You might want to pad these cells a bit, depending on the content.
Also you will need vendor prefixes and maybe to apply a style with javascript for IE. Or use Pie.
How can I create a table with double border: the outer border of 1 px and the inner border of 10px?
This border is only necessary on the table, not between cells.
Thank you.
Without adding extra tags that would break your semantics, I would recommend combining <table> and <tbody> and style them with CSS:
HTML:
<table id="cow">
<tbody>
<tr><td>Foo</td><td>Bar</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
<tr><td>Foo</td><td>Bar</td></tr>
</tbody>
</table>
CSS:
#cow {
border: 1px solid #000;
}
#cow tbody {
display: block;
border: 10px solid #ccc;
}
Working example here.
An alternative approach would be to wrap your table in a containing <div> element. You would then apply the 1 pixel border to the <div> and the 10 pixel border to the <table>. This will definitely work, but will be a less semantic approach. Another downside to this is that the <div> width will default to the maximum width available, resulting in a larger 1 pixel border than your actual table width (see example).
you can take the table in a div tag and then give div tag 1px border and inner table 10 px border.
border-style: double;
border-width: thin;
I have a css class (given below). The border element is working fine in firefox, it creates a 6px white border around the image. But in IE(6) it is not creating any border ie only displays the image. Pls help me out I need to figure it out quickly.
.pimage2 {
background:url(../images/img2.gif) no-repeat;
width: 469px;
height:203px;
border:7px solid #ffffff;
}
Thanks,
Aditya
According to your comment, you're using the CSS on a table cell like this:
<td class="pimage2"></td>
But IE6 won't see this and you won't be able to get the border to show.
To get the border around it, just add a non-breaking space entity in the table cell. Like so:
<td class="pimage2">&‎nbsp;</td>
maybe with black color: ?
border:7px solid #000;
To get the border in the latest css version, you have to write border-style first then the rest of the attributes or design of the border is considered.
border:blueviolet;
border-width: 0.5px;
border-style:solid;
Or, the border will not render.