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;
}
Related
My border radius does not show if I have the property of border-collapse on the table tag. I need the border-radius property on and if I remove the border-collapse property I don't get the look I want which is the grey sections to go to the very edge of the table.
What is the solution to this and whats the cause of it?
Thanks in advance
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*if i comment out the border-collapse property it then shows my radius*/
border-collapse: collapse;
margin: 25px 0;
width: 50%;
border-radius: 5px;
font-size: 1.4rem;
min-width: 400px;
border: 1px solid #c3c3c3;
/*margin is just for demo*/
margin: 20px 20px;
}
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<table>
<tbody>
<tr>
<td>Application</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
</tr>
</tbody>
</table>
very
If your intention is to not see any spacing between the content background and the border, then simply remove the border-collapse and add border-spacing: 0. border-spacing: 0 will not affect the border radius at all and it will also give you the results of no space between the border and the inner content.
In searching it seems there are some anomalies with using collapse and radius together. There are also some work arounds where you use psuedo tags on the tables children specifically to get a radius to work, but why waste all that time when you can just remove the space between the border and its inner content using border-spacing which works well with border-radius
EDIT: By using psuedo selectors along with border-space: 0 you can achieve a more pronounced border radius.
We want to target each td element that borders the edge of the table element.
table tr td:first-of-type and table tr td:last of type to get the left and right sides. Then we target each subsequent first and last child to get the corners. Lastly, if this is a dynamic table and you will have more than two data tables located in the table, add td:not(:first-child):not(:last-child) on each first and last of type.
I don't get the look I want which is the grey sections to go to the very edge of the table.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
table {
/*add border-spacing: 0 instead of border-collapse: collapse*/
border-spacing: 0;
margin: 25px 0;
width: 50%;
font-size: 1.4rem;
min-width: 400px;
/*margin is just for demo*/
margin: 20px 20px;
}
/* Start psuedo child tags here, targeting each data elements relevant corners and sides */
table tr td:first-of-type {
border-left: 1px solid #c3c3c3;
}
table tr td:last-of-type {
border-right: 1px solid #c3c3c3;
}
/* :not(:first-child):not(:last-child)
This will get any potential data tables that are added
that are not sides or corners however, they are border
data tables on top or bottom */
table tr:first-of-type td:not(:first-child):not(:last-child){
border-top: 1px solid #c3c3c3;
}
table tr:last-of-type td:not(:first-child):not(:last-child){
border-bottom: 1px solid #c3c3c3;
}
table tr:first-of-type td:first-child {
border-top: 1px solid #c3c3c3;
border-top-left-radius: 5px;
}
table tr:first-of-type td:last-child {
border-top: 1px solid #c3c3c3;
border-top-right-radius: 5px;
}
table tr:last-of-type td:last-child {
border-right: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-right-radius: 5px;
}
table tr:last-of-type td:first-child {
border-left: 1px solid #c3c3c3;
border-bottom: 1px solid #c3c3c3;
border-bottom-left-radius: 5px;
}
/* End Psuedo tags here */
table tr {
border-bottom: solid 1px #d1d1d1;
}
table tr:nth-child(odd) {
background-color: #eee;
}
table td {
padding: 10px 15px;
}
table td:first-of-type {
font-weight: 600;
}
<div id="table">
<table>
<tbody>
<tr>
<td>Application</td>
<td>here is some data</td>
<td>Natural gas & LPG</td>
</tr>
<tr>
<td>Standards</td>
<td>some data in between</td>
<td>BS EN ISO 9001:2008 - EN 331:1998</td>
</tr>
<tr>
<td>Connection</td>
<td>some data in between</td>
<td>BSP Taper F</td>
</tr>
<tr>
<td>more tables</td>
<td>some data in between</td>
<td>more data</td>
</tr>
<tr>
<td>some more data still</td>
<td>some data in between</td>
<td>and yet more about this data</td>
</tr>
<tr>
<td>Finish</td>
<td>Plated</td>
<td>Plated too</td>
</tr>
</tbody>
</table>
</div>
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>
I have a table with cells that have top and bottom padding of 10px. I would like to vertically align the text in these cells to the bottom, which won't work with the padding rule applied. Any suggestions?
Fiddle: http://jsfiddle.net/t520n0z4/1/
HTML Code:
<table>
<tr>
<td class="paddedCell">Name</td> <!--text should be aligned to the bottom here -->
<td class="cell">Address</td>
</tr>
<tr>
<td class="paddedCell">Email</td> <!-- text should be aligned to the bottom here -->
<td class="cell">Phone</td>
</tr>
</table>
CSS Code
table {
border: 1px solid #000;
border-collapse: collapse;
}
tr {
border-bottom: 1px solid #000;
}
.paddedCell {
padding: 10px 0;
vertical-align: bottom;
border-right: 1px solid #000;
}
.cell {
vertical-align: bottom;
}
A solution instead of using padding you can set height to tr:
table {
border: 1px solid #000;
border-collapse: collapse;
}
tr {
height: 40px;/*add height*/
border-bottom: 1px solid #000;
}
.paddedCell {
/*padding: 10px 0; remove padding */
vertical-align: bottom;
border-right: 1px solid #000;
}
.cell {
vertical-align: bottom;
}
<table>
<tr>
<td class="paddedCell">Name</td>
<td class="cell">Address</td>
</tr>
<tr>
<td class="paddedCell">Email</td>
<td class="cell">Phone</td>
</tr>
</table>
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".