I'm wondering why this is rendering correctly with or without the .container in css color: red;. What's going on behind the code and how will I achieve the second image without removing the .container?
.container table {
border-collapse: collapse;
border: solid 1px #000;
}
.container table td {
border: solid 1px #000;
}
.no-border-right {
border-right: solid 1px #FFF;
color: red;
}
<div class="container">
<table>
<tr>
<td class="no-border-right">One</td>
<td>Two</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>
</div>
you can do
.container table td.no-border-right {
border-right: solid 1px #FFF;
color: red;
}
.container table td has more specificity than .no-border-right
It's better not to use !important unless absolutely necessary as. First work within the rules of specificity as best as you can
Checkout this guide and this calculator of specificity
.no-border-right {
border-right: solid 1px #FFF !important;
color: red;
}
Just use border-right: solid 1px #FFF!important;
.container table {
border-collapse: collapse;
border: solid 1px #000;
}
.container table td {
border: solid 1px #000;
}
.no-border-right {
border-right: solid 1px #FFF!important;
color: red;
}
<html>
<head>
<title></title>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<table>
<tr>
<td class="no-border-right">One</td>
<td>Two</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>
</div>
</body>
Here is a Solution.
The key css property is border-collapse:collapse;. You can read more here.
table {
border-collapse:collapse;
border:1px solid black;
}
td {
border-right:1px solid black;
border-bottom:1px solid black;
}
.no-border-right{
border-right:none;
}
Growing an ugly duckling into a swan
Step 1 - Increasing specificity
Placing .container before .no-border-right will increase its specificity, but looks ugly! Look at these ugly gaps:
Step 2 - Beautify your table
Let's go one step further and make this:
In order to remove those gaps, let's:
Use the default border-collapse: separate
Use border-spacing: 0 to remove the default gaps between cells
Place the top and left border on the table itself
Place the right and bottom border on the cells
Remove the right border on .no-border-right and the left border on the cell next to it (targeted with the adjacent selector +)
Working Example
.container table {
border-spacing: 0;
border-top: solid 1px #000;
border-left: solid 1px #000;
}
.container table td {
border-right: solid 1px #000;
border-bottom: solid 1px #000;
}
.container .no-border-right {
border-right: none;
color: red;
}
.container .no-border-right + td {
border-left: none;
}
<div class="container">
<table>
<tr>
<td class="no-border-right">One</td>
<td>Two</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>
</div>
CSS gives a higher priority to selectors with parents, therefore nullifying the order in the document.
Simple fix: replace your ".no-border-right" selector with ".container table td.no-border-right".
Related
I have this code where I am trying to color all 4 sides of a TD cell with red, but if you run the code, only the bottom and the right border are getting color (in Mozilla Firefox). Is there a way to color all 4 borders?
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border-color:red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
This question/answer does not help: CSS Border declare 4 sides, color, width, in one line
If there is a way to style it via a class, that will be better than using a an inline style command.
Change your inline style to style="border:1px double red;":
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td style="border:1px double red;">XXX-8</td>
</tr>
</tbody>
</table>
</div>
A little trick, create an ::after to the td you want to add the border.
#selections_table table {
border-collapse: collapse;
}
#selections_table td,
th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
position:relative;
}
#selections_table td.border-red::after{
content: "";
position: absolute;
top: -1px;
left: -1px;
right: -1px;
bottom: -1px;
border: 1px solid red;
}
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td class="border-red">XXX-8</td>
</tr>
</tbody>
</table>
</div>
https://jsfiddle.net/ym82a0k7/
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid red;
}
</style>
</head>
<body>
<div id="selections_table">
<table>
<tbody>
<tr>
<th>#</th>
<th>Model</th>
</tr>
<tr>
<td>1</td>
<td>XXX-8</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
First, you don't need to declare td here:
#selections_table td,th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
So,
#selections_table th {
border: 1px solid black;
border-bottom: 1px solid red;
padding: 3px 4px 3px 4px;
}
td {
border: 1px solid red;
}
This is another option (by increasing the pixel, it is not a good practice but another option)
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 2px solid red;
}
or just like this:
#selections_table th {
border: 1px solid black;
padding: 3px 4px 3px 4px;
}
td {
border: 1px double red;
}
I would like a table such that I have multiple rows, but no inner-vertical lines. That implies a complete border around the table, but no inner-column borders. Specifically, I would want the ability to have that, but with spacing around each row and curved edges, as shown in this example code: https://jsfiddle.net/n14ye7nk/
body {
font-family: sans-serif;
}
#table {
border-spacing: 0.3em;
}
#table td {
border: 2px solid #30c;
border-radius: 0.4em;
padding: 1em;
text-align: center;
}
Unfortunately tables aren't really designed to do what you are asking.
In order to have the border around the row rather than the cell, simply shift the border rule to the #table tr selector, and also add border-collapse: collapse to the <table> element itself.
body {
font-family: sans-serif;
}
#table {
border-collapse: collapse;
border-spacing: 0.3em;
}
#table tr {
border: 2px solid blue;
}
#table td {
padding: 1em;
text-align: center;
}
<table id="table">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Table row spacing can be done with border-collapse: separate... though this doesn't allow for the border.
Note that neither approach will allow border-radius to be applied to tr. The best way of doing this is to simply set individual corner radii on the <td> element :first-child and :last-child. Note that you'll want cellspacing="0" on the <table> itself.
body {
font-family: sans-serif;
}
#table td {
padding: 1em;
text-align: center;
}
#table tr:first-of-type td {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
}
#table tr:last-of-type td {
border-bottom: 2px solid blue;
}
#table tr:first-child td:first-child {
border-left: 2px solid blue;
border-top-left-radius: 10px;
}
#table tr:first-child td:last-child {
border-right: 2px solid blue;
border-top-right-radius: 10px;
}
#table tr:last-child td:first-child {
border-left: 2px solid blue;
border-bottom-left-radius: 10px;
}
#table tr:last-child td:last-child {
border-right: 2px solid blue;
border-bottom-right-radius: 10px;
}
<table id="table" cellspacing="0">
<tbody>
<tr>
<td>this</td>
<td>is</td>
<td>a table</td>
</tr>
<tr>
<td>with</td>
<td>rounded</td>
<td>cells</td>
</tr>
</tbody>
</table>
Again, this is not ideal.
The best way of handling this really is by completing replacing the table with <div> elements instead. This way you can make use of calc() in the width to ensure even spacing, float: left to control how many elements are in a row, and margin-bottom to add whitespace in between the rows. You also only have to apply the core border-radius on the .row itself:
.row {
font-family: sans-serif;
border: 2px solid blue;
border-radius: 10px;
}
.row div {
display: inline-block;
text-align: center;
padding: 1em;
width: calc(100% / 3 - (3px + 2em));
}
.row:first-of-type {
margin-bottom: 20px;
}
<div class="row">
<div>this</div>
<div>is</div>
<div>a table</div>
</div>
<div class="row">
<div>with</div>
<div>rounded</div>
<div>cells</div>
</div>
Here is the fiddle :
http://jsfiddle.net/AV38G/
HTML
<table>
<tr class="first-line">
<td class="first-column">Some</td>
<td>Foobar</td>
<td>Stuff</td>
</tr>
<tr>
<td class="first-column">foobar</td>
<td>raboof</td>
<td>184</td>
</tr>
<tr>
<td class="first-column">bar</td>
<td>87458</td>
<td>184</td>
</tr>
<tr>
<td class="first-column">874</td>
<td>raboof</td>
<td>foobar</td>
</tr>
</table>
CSS:
/* ACTUAL CSS */
table {
width: 300px;
border-collapse: collapse;
}
tr td.first-column{
border-left: none;
}
tr.first-line {
border-bottom: 3px solid green;
border-top: none;
}
tr.first-line td {
border-left: none;
}
td {
border-left: 3px solid red;
}
tr {
border-top: 3px solid red;
}
Ugly, right. So why the red border overwrite/override the green border ?
How can I get the "untouched" horizontal green bordel ? (no HTML5/CSS3 please, accessibility purposes)
That behavior is caused because you are collapsing the border of the table, use border-spacing: 0; instead, call a class on the first data row and than I've used the selector below to turn off the border-top
.second-row td {
border-top: 0;
}
Demo (Tested on chrome and firefox)
/* ACTUAL CSS */
table {
width: 300px;
border-spacing: 0;
}
tr td.first-column{
border-left: none;
}
td {
border-left: 3px solid red;
border-top: 3px solid red;
}
tr.first-line td {
border-left: none;
border-bottom: 3px solid green;
border-top: none;
}
.second-row td {
border-top: 0;
}
I'm having this weird little problem I can't get my head wrapped around.
What it needs to do is:
table with 3 cells, no/white borders except the top border of all cells and the left and right border of the middle cell.
Here is the code:
CSS:
table{
font-family: verdana,arial,sans-serif;
font-size:11px;
border-width: 1px;
border-collapse: collapse;
}
table td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-top-color:#000000;
border-right-color:#FFFFFF;
border-bottom-color:#FFFFFF;
border-left-color:#FFFFFF;
}
table td.centercell {
border-width: 1px;
padding: 8px;
border-style: solid;
border-top-color: #000000;
border-right-color:#000000;
border-bottom-color:#FFFFFF;
border-left-color:#000000;
z-index:10;
}
HTML:
<table>
<tr>
<td>Info Header 1</td>
<td class="centercell">Info Header 2</td>
<td>Info Header 3</td>
</tr>
</table>
Does anybody have any idea why I can't get it fixed?
It's the border-collapse on the table that's doing the damage. Obviously you're still going to need that so . . .
Add a border-right to the first cell and only border-right to the second.
table td.centercell {
border-width: 1px;
padding: 8px;
border-style: solid;
border-top-color: #000000;
border-right-color:#000000;
z-index:10;
}
td:first-child{
border-right: 1px solid #000000;
}
Fiddle here : http://jsfiddle.net/7t85q/
So instead of using #FFFFFF, use transparent
Then set the border-right of the td
td {
border-right:1px solid #000;
}
td:last-of-type {
border-right 1px solid transparent
}
I believe this is what you're looking for: http://jsfiddle.net/2F8vF/2/
Even though centercell has it's own class, it's still a table td class as well. So it was grabbing some CSS that you didn't want.
table td {
padding:8px;
border-top: 1px solid #000;
border-left:0px;
border-right:0px;
border-bottom:0px;
}
table td.centercell {
border-left:1px solid #000;
border-right:1px solid #000;
}
I have a very simple HTML table like below:
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr><!-- Table Row -->
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
that I want when I hover on each of the cells, the borders of the cell could change color. So I wrote the following CSS trying to achieve the effect:
table{
position: absolute;
font-family:Arial, Helvetica, sans-serif;
color:white;
font-size:12px;
border:white 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
width: 100%;
height: 100%%;
}
table tr {
text-align: center;
padding-left:20px;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
width: 33%;
height: 50%;
background-color: black;
}
table td:hover{
border:blue 1px solid;
}
This code works, but not perfectly. It works great when I hover on the cells 1, 2, 3 (as numbered in the html), BUT when I hover, for example, on cell 4 5 6, the top border of the cell is not showing blue. I think the top borders of them are overlayed by the bottom borders of the cells above.
Is there a work around to this issue?
With border-collapse set to collapse, the solution would be to use an inset border for all the cells, and a solid border for the cell that the mouse hovers over. Here's the suggested CSS in action: http://jsfiddle.net/QmHGG/
The following is the CSS that was applied to the table:
table, tr, td {
border: 1px inset black;
border-collapse: collapse;
border-spacing: 0;
}
td:hover {
border: 1px solid red;
}