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.
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;
}
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 am working on a web page which has a table with several columns as follows
In the above picture each td has blue border but I am trying increase thickness for left border of Ask1 using the following markup and CSS
HTML
<td class="clientOffer1">Ask1</td>
CSS
clientOffer1 {
border-left: 3px solid #0088cc;
}
but above CSS is replaced by the original css of td which is used for remaining columns which is as follows
td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
How do use both CSS without conflicting one another?
Classes are selected with a leading period in CSS:
.clientOffer1 { ... }
DEMO
td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientOffer1 {
border-left: 3px solid #0088cc;
}
If you are still having troubles, it would be because some level of specificity is taking hold. Try the following:
.client {
border-left: 3px solid #0088cc !important;
}
Here's some reading material:
Specificity
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>