Here is how I style tables now:
#content table {
width: 100%;
margin-top: 1em;
border-collapse: collapse;
border: 1px solid #222;
}
#content table td {
border: 1px solid #888;
padding: .3em;
}
What I am trying to achieve is to have tables with black outside border (#222). However, I want the inside border to be lighter color (let's say #888). How can I achieve this?
Why not have a div container for the table and set it's border as required. Then simply set the table border independently?
Markup:
<div class='outerDiv'>
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
</div>
Css:
.outerDiv{ border:solid 2px #222; }
.outerDiv table { border:solid 2px #888; }
Related
This is my failed attempt:
https://jsfiddle.net/j75hxxa2/1/
I want the block on the right side and the extra gray part gone.
Adding
float: right;
To the parent makes its children very small and tiny. If I try to widen the children by adding
width: 50%;
They break the line.
Is there a simple fix?
(Also I think
margin-top: 1px;
Isn't working?)
Thanks in advance
A better way is to use a table:
HTML:
<table>
<tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr>
<tr><td>I</td><td>II</td><td>III</td><td>IIII</td></tr>
</table>
CSS:
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
}
Add float left to .cell as below, I have changed background color, change it back to your previously assigned or as you wish.
.cell {
width: 24.8%;
float:left;
}
#table {
margin-right: 1px;
margin-top: 1px;
background-color: #f22;
width:100%;
height:37px;
}
For what ever reason, I get a small gap in between the two TD cells (Lines dont touch).
There is no padding or margin on that side... I did this collapsing idea.
Why is it there? http://jsfiddle.net/CKy6U/
My html:
<table>
<tr>
<td>
TEST CELL 1
</td>
<td>
TEST CELL 2
</td>
</tr>
</table>
my CSS:
table
{
width: 100%;
}
tr
{
border-bottom: 1px solid Black;
}
td
{
border-collapse: separate;
border-spacing: 0px;
border-left: 1px solid Black;
border-bottom: 1px solid Black;
padding: 3px;
width: 50%;
}
My Result:
Add Border Collapse for table.
table
{
width: 100%;
border-collapse:collapse;
}
DEMO
Add border-right: 0px; to and remove border-collapse: separate from the td. Add border-collapse: collapse to the table.
Fiddle: http://jsfiddle.net/CKy6U/7/
Try like this: LINK
CSS:
table {
width: 100%;
border-collapse:collapse;
}
use normalize.css or an css reset
Also I would add
<table cellspacing="0" cellpadding="0"> ... </table>
Remove the border-collapse on the td and add it to the table
table{
width: 100%;
border-collapse: collapse;
}
tr{
border-bottom: 1px solid black;
}
td{
border-spacing: 0px;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 3px;
width: 50%;
}
You have to add border-collapse: collapse in your table or cellspacing="0" in your html table.
css
table {
width: 100%;
border-collapse: collapse;
}
fiddle
html:
<table cellspacing="0">
fiddle
Both solutions should work. But use border-colapse cause as #Mooseman comment cellspacing is obsolete in html5.
I have a tbody with a background color. The td has a border-radius. However, the background between the border and the table is white.
HTML:
<table>
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
CSS
table {
border: 100px solid black;
border-radius: 100px;
}
tbody {
background-color: black;
}
td {
background-color: white;
border-radius: 100px;
padding: 100px;
}
http://jsfiddle.net/FKc94/2/
I tried with background-clip but couldn't find a way to make it works. How could I fix that ?
The background-color actually need to be on the table itself:
HTML:
<table>
<tbody>
<tr><td>test</td></tr>
</tbody>
</table>
CSS
table {
border: 100px solid black;
border-radius: 100px;
background-color: black;
}
tbody {
background-color: black;
}
td {
background-color: white;
border-radius: 100px;
padding: 100px;
}
http://jsfiddle.net/FKc94/4/
Using html tables in Firefox 24 to display information, I extensively use CSS to format lines and columns.
The problem I encounter is that I specified some borders for <td>, and a background-color for <tr>, but the tr's background color overlaps the td's borders.
Is it normal than tr styles are shown on top of td's ones ?
The two problems are :
All the td's with class="ref" should correctly display a 2px right and left
border in .ann and .tbx rows (which isn't the case when tr background color is set)
The first column right border should always be displayed too, even when the background color is set in the adjacent cells, cf.
div.tb tr td:first-child {
border-right: 1px solid black;
}
Here is a code sample (http://jsfiddle.net/RVJSD/):
CSS:
/* Default reset style sheet */
* {
margin: 0;
padding: 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.tb {
font-family: Ubuntu;
font-size: small;
text-align: right;
}
div.tb tr td {
padding: 0 2px 0 2px;
}
div.tb tr td {
padding: 0 2px 0 2px;
}
div.tb tr td:not(:first-child) {
width: 92px;
}
div.tb tr td:first-child {
border-right: 1px solid black;
}
div.tb tr:not(:first-child) td:not(:first-child):not(.ref) {
border-right: 1px solid #b0b0b0;
}
div.tb tr td.ref { /* FIXME */
border-left: 2px solid black;
border-right: 2px solid black;
}
div.tb tr.ann {
background: #99CCFF;
font-size: 1.3em;
font-weight: bold;
text-align: center;
border-bottom: 1px solid black;
}
div.tb tr.ann td {
height: 2.5em;
}
div.tb tr.ann td:first-child {
background: white;
font-size: small;
font-weight: bold;
text-align: right;
}
div.tb tr.ann td.ref {
background: green;
color: white;
}
div.tb tr.txb {
background: #99CCFF;
font-weight: bold;
}
HTML:
<body>
<div class="tb">
<table>
<thead/>
<tbody>
<tr class="ban"><td>Barfoo</td><td>Bar</td><td>Blah</td><td>Foobar</td><td>FooBlah</td><td>BlahBar</td><td>Foo</td></tr>
<tr class="ann"><td>ann</td><td>13</td><td>9</td><td class="ref">13</td><td>12</td><td>9</td><td>15</td></tr>
<tr class="nbr"><td>nbr</td><td>-34</td><td>20</td><td class="ref">15</td><td>18</td><td>123</td><td>12</td></tr>
<tr class="txb"><td>txb</td><td>2,83%</td><td>3,38%</td><td class"ref">3,84%</td><td>3,21%</td><td>3,52%</td><td>3,27%</td></tr>
</tbody>
</table>
</div>
</body>
If possible, I'd like to keep the setting border-collapse:collapse (and not separate) like so :
table {
border-collapse: collapse;
border-spacing: 0;
}
and I don't like the Table Border Overlap solution as the div adds additional border width and make the code less legible.
Your stylesheet styles everything with position: relative. This causes every cell to be its own stacking context and to paint its background and the background of its row and table over the borders of earlier cells if they overlap (which in the collapsed border model they do). And since you're putting all the borders on the right of the cells (as in, depending on the border of the earlier cell showing through), things fail.
Note that per spec the behavior here is not undefined; CSS (as of version 2.1, at least) does not define what happens when you relatively position table cells.
Is this you looking for for hover use : instead of .
div.tb tr.ann td:hover { /* FIXME */
background: #069D81;
border-left: 2px dotted #069D81;
border-right: 2px dotted #069D81;
}
Js FIDDLE
Here's the issue. I have my code so that I should be seeing a border on top and bottom of each <tr> item. However, I only see what's on bottom except for the top element.
.tstyle1 {
margin: 10px 0 0 30px;
width: 950px;
}
.tstyle1 tr {
height: 120px;
border-bottom: 1px solid black;
border-collapse: separate;
border-top: 1px solid black;
border-bottom: 1px solid orange;
}
.tstyle1 td {
border: none;
}
Here's the issue recreated.
http://jsfiddle.net/fL3rx/
Try
adding display: block; to your .tstyle1 tr
The issue is that your border-bottom definition is simply covering your border-top definition. So the color beneath does not show. Try setting the border-bottom:none and you'll see the top border shows
The suggestion by #Pricey did some magic though.