I need to have such thin line for the whole table as seen above. The above image is a sample only. My solution, doesn't work. The table shows no border at all.
Here is my CSS:
table {
border-width: thin;
border-spacing: 2px;
border-style: none;
border-color: black;
}
Style the td and th instead
td, th {
border: 1px solid black;
}
And also to make it so there is no spacing between cells use:
table {
border-collapse: collapse;
}
(also note, you have border-style: none; which should be border-style: solid;)
See an example here: http://jsfiddle.net/KbjNr/
Related
I am trying to create a table in which I want a border all around the table ( and in between rows and columns too ). The problem is that I have some blank spaces in my table where the border of the table does not show, if I try giving an "outline" property to the table, the table border merges with the cells border to create a broader border at some places.
Here is the relevant code -
table{
text-align: center;
vertical-align: middle;
padding: 1.5em;
border-collapse: collapse;
border: 1px solid #ccc;
background-color: #eee;
}
tr,th,td{
text-align: center;
vertical-align: middle;
padding: 1.5em;
border-collapse: collapse;
border: 1px solid #ccc;
background: #fff;
}
here is how the table looks -
No Border:
here is what happens when I add the outline: 1px solid #ccc; to the table's property -
Double Border:
Suggest an efficient solution.
I'm working on a dynamically generated table atm. The CSS-File looks like this:
...
td {
border: 1px solid white;
}
tr {
border: 1px solid black;
font-family: Arial;
}
table {
width: 850px;
border-spacing: 8px 8px;
border: 1px solid black;
margin-left: auto;
margin-right: auto;
text-align: center;
}
...
I don't want to see the border of the cells, BUT the cells need to be there, because they are a placeholder, so I change their color to white.
My problem is that I don't know why the border of the rows won't get displayed. Or let's say, is it possible to display the row's border, but not the cells'?
Since different browsers behave differently, where table borders are concerned, I found it always more consistent, to put the borders to the top/bottom of the cells instead of the rows:
td {
border-bottom: 1px solid #000;
}
Since this will draw the top border of each cell, it will look like the row has a border(-bottom).
To add another border to the very top:
tr:first-child td {
border-top: 1px solid #000;
}
Finally, if you need the left and right borders too, add them to the first/last cell of each row:
td:first-child {
border-left: 1px solid #000;
}
td:last-child {
border-right: 1px solid #000;
}
Sorry, if this looks clumsy, but in my experience this will work better than trying to force the rows to display a correct border.
Please try this:
tr {
outline: thin solid black
font-family: Arial;
}
tr{
outline : 1px solid black;
}
I have a theme with following code:
table.alt {
border-collapse: separate;
}
table.alt tbody tr td {
border: solid 1px #e5e5e5;
border-left-width: 0;
border-top-width: 0;
}
table.alt tbody tr td:first-child {
border-left-width: 1px;
}
table.alt tbody tr:first-child td {
border-top-width: 1px;
}
table.alt thead {
border-bottom: 0;
}
table.alt tfoot {
border-top: 0;
}
When I add my css to my html, the borders aren't aligned correctly. My code is:
table.alt tr th.rightAlignBorderLeft {
text-align: right;
border-left: solid 1px #e5e5e5;
}
Here's a screenshot:
I don't want to set border-collapse to collapse, because changing my default theme code may mess up my pages.
How can I fix this?
Edit:
Here's my (new) fiddle: http://jsfiddle.net/ru1923mf/1/
I've fixed this. I found the answer here: http://css-tricks.com/forums/topic/how-can-i-set-a-border-in-alignment-with-other-borders/
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
I am trying to highlight the border of a table row on hover. Unfortunately this only works for the first row of cells. Lower rows have one border that does not change color. I have tried using outline but it doesn't play nice with :hover in webkit.
http://jsfiddle.net/S9pkM/2/
Imagine your standard table html. Some tr's with some td's. Hovering over a row should highlight its border in red.
table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 3px solid black; }
table tr:hover td { border-top-color: red; border-bottom-color: red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child { border-right-color: red; }
I am open to alternate approaches, but I am stuck with the table structure. No inserting additional html besides standard <table> <tr> <td>
I've been facing this same problem and finally found a simpler solution here.
You can use this CSS trick ( border-style: double; ) that works for 1px borders:
#mytable tr.row:hover td
{
border-style: double;
border-color: red;
}
This will make your border-color work (be the top most one) no matter what. :-)
For 1px borders see Leniel's solution that uses border-style: double. This is much simpler. A double border is one that shows a 1px line for the inside and outside edges of the border. This doesn't do anything for a 1px border, but on >1px there is a gap.
For borders >1px you remove the bottom border for all of the <td>'s with border-bottom: 0. The top borders of the other cells will keep everything looking the way they should, except for the last row. The last row we fix with tr:last-child td { border-bottom: your border style }. Finally in your hover pseudoclass you set the bottom border.
http://jsfiddle.net/S9pkM/16/
table { border-collapse: collapse; } /*I am aware of separate */
table td { border: 1px solid black; width: 50px; height: 25px; padding: 5px; border-bottom: 0; }
table tr:last-child td { border-bottom: 1px solid black; }
table tr:hover td { border-top-color: red; border-bottom: 1px solid red; }
table tr:hover td:first-child { border-left-color: red; }
table tr:hover td:last-child { border-right-color: red; }
why not to use separate border?
http://jsfiddle.net/S9pkM/6/
Just put this code into your head section:
<style>
table td { border: 2px solid transparent; width: 50px; height: 50px; padding: 5px 5px 5px 5px;}
table td:hover {border:2px solid red; }
</style>