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.
Related
I was trying to put some horizontal spacing between the table cells here:
http://jsfiddle.net/mVX93/43/
However the only thing I was able to do to get it to appear correctly was to put a thick border the same colour of the background a bit like this:
border: 10px solid gray;
Is there not a better way to put spacing between the cells?
Change your code to this:
#my-table td{
padding-left: 10px;
padding-right: 10px;
vertical-align: top;
background-color: white;
}
Remove this line
border-collapse: collapse;
to see your space between cells better
I am trying to achieve the following effect using CSS
I tried using a table and an empty column at second place to achive double-line effect and then I used left and right borders.But I am getting breaks shown below
I used border-collapse:collapse but it then removes that empty column making the trick fail.So what can I do or any other hack that you can suggest.
EDIT: Here is the code
<table>
<tr><td>Name</td><td class="target"></td><td class="target1">Age</td><td>School</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
<tr><td>Nav</td><td class="target"></td><td class="target1">22</td><td>Abc</td></tr>
</table>
The css
table td
{
padding: 14px;
padding-left: 3px;
font-size: 20px;
border-bottom: 1px solid #F4C8C8;
}
.target
{
border-right: 1px solid #F4C8C8;
}
.target1
{
border-left: 1px solid #F4C8C8;
}
table tr td
{
}
table
{
/*border-collapse: collapse;*/
}
Why not just use the border-style double?
just add a class "first" to your first column and add this style to it:
.first{
border-right-style:double;
}
http://jsfiddle.net/KEw9W/
EDIT: here's a fiddle with your code: http://jsfiddle.net/hC78S/3/
I've removed the empty cells and added this to your "target" code:
.target1
{
border-left: 4px double #F4C8C8;
}
As you can see, you need to enlarge the border in order to be able to see the double line. (because 1 pixel won't be able to show 2 lines obviously)
JSFiddle of the offending code: Fiddle
Specifically bits like:
.start{
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
I'm working on a schedule table. The background for the entire table has a .5 alpha on the background color, so the page's background shows through. When something is scheduled the respective blocks are highlighted in specific colors. The first and last of these cells have a radius.
Ideally I'd like to be able to persist the .5 alpha background in the corners, where the radius leaves some white. I tried setting the background on the tr element, but that didn't persist (overruled by the class). Divs seem like a good option, but I don't want the borders between the cells (not done here for simplicity), and divs don't seem to allow for that in this case.
Set the background-color on the table element:
table {
border-spacing: 0;
background-color: rgba(0,0,0,0.5);
}
td {
border: 1px solid red;
width: 75px;
height: 50px;
}
http://jsfiddle.net/BnUU8/1/
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.
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;