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;
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.
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 want to create an HTML table where each cell is clickable, and clicking on a cell adds a border to the single div within the cell. I want that div's border to exist entirely within the existing confines of the td that contains it, without resizing the table or its cells at all. I can't seem to make this happen correctly.
This previous question seems to address the same issue and points to some articles about the box-sizing CSS options. I have a fiddle where I tried to implement this without success: http://jsfiddle.net/YsAGh/3/.
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
<table>
<tr>
<td><div>1</div></td>
<td><div>2</div></td>
<td><div>3</div></td>
</tr>
....
</table>
Here's what currently happens. The border causes the containing td to grow to accommodate the div's border.
How can I add the border to the div without it affecting the containing table?
Look at my JSFiddle.
You need to provide a width/height to your cells:
td {
// ...
width:33.3%;
height:33.3%;
}
How about using an inset box-shadow?
.selected {
box-shadow: inset 0px 0px 0px 2px red;
}
OK, since I've seen a some support for my response in the comments, here it as an answer :)
Presize your cell by adding a yellow 'hidden' border to the .unselected state:
CSS
.unselected {
background-color: yellow;
border: 2px solid yellow; // Presize with this yellow border
}
div {
..
line-height: 1; // Add line-height to regulate size (optional)
}
Codepen example.
Using table-layout to fix the width of cells and small padding in selected to prevent increasing height.
table {
table-layout: fixed;
}
.selected {
padding: 1px;
}
See JSFiddle
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.
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">