i am trying to handle the bottom lines inside a table (i want to cut them a bit to the right)
here is my table code:
<table class="reportTable">
<thread>
<tr>
<th>firstColumn</th>
<th>secondColumn</th>
<th>thirdColumn</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</tbody>
</table>
and here is my css code:
.reportTable th,td{
border-bottom: 1px solid #E7E7E7;
border-right:16px solid transparent;
}
You can add border-spacing to the table and position it relative with a negative left to push it back to it's original spot.
http://jsfiddle.net/hyn1db04/3/
<table class="reportTable">
<thread>
<tr>
<th>firstColumn</th>
<th>secondColumn</th>
<th>thirdColumn</th>
</tr>
</thread>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>33</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</tbody>
CSS
.reportTable {
border-spacing: 30px 0;
}
.reportTable th, .reportTable td {
border-bottom: 1px solid #E7E7E7;
position: relative;
left: -30px;
}
EDIT:
Alternatively, you can do this: http://jsfiddle.net/m021e4gh/8/
.reportTable th,td {
border-bottom: 1px solid #E7E7E7;
}
table td + td, table th + th {
position: relative;
left: 30px;
}
table td + td + td, table th + th + th {
position: relative;
left: 60px;
}
Add a width if you want.
I believe what you want is the border-spacing property in CSS:
.reportTable {
border-spacing: 10px 0;
}
.reportTable th, .reportTable td {
border-bottom: 1px solid #E7E7E7;
border-right: 1px solid #E7E7E7;
}
Example on JSFiddle
Related
I am trying to round the table header thead th on the far left and far right. I have them rounded but the underlying tr is poking its background color through leaving me with two th's with a rounded corner but with a sharp edge poking through from the thead tr.
I've tried playing around in the Firefox inspect element to apply CSS in real time but I cannot get the sharp edges to go away.
table thead tr {
background-color: #005073;
}
table thead tr th {
width: 200px;
text-align: center;
}
table {
margin-right: auto;
margin-left: auto;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
table tbody tr:hover {
background-color: black;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #1ebbd7;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
<div class="contentTable">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>State</th>
<th>Zip-Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>212 Lift St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>2</td>
<td>Todd</td>
<td>331 Geromino St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>3</td>
<td>Jim</td>
<td>1222 Jumbo Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>4</td>
<td>Susan</td>
<td>888 Bambi Way</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>5</td>
<td>James</td>
<td>112 Falcon Dr.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>6</td>
<td>Abby</td>
<td>6219 Pumpkin Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
</tbody>
</table>
</div>
Change
table thead tr {
background-color: #005073;
}
to
table thead th {
background-color: #005073;
}
You could achieve your desired effect by applying border-radius: 6px 6px 0px 0px; to the entire table and giving it overflow: hidden.
table thead tr {
background-color: #005073;
}
table thead tr th {
width: 200px;
text-align: center;
}
table {
margin-right: auto;
margin-left: auto;
width: 100%;
border-collapse: separate;
border-spacing: 0;
}
table tbody tr:hover {
background-color: black;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #1ebbd7;
}
table {
border-radius: 6px 6px 0px 0px;
overflow: hidden;
}
<div class="contentTable">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>State</th>
<th>Zip-Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob</td>
<td>212 Lift St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>2</td>
<td>Todd</td>
<td>331 Geromino St.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>3</td>
<td>Jim</td>
<td>1222 Jumbo Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>4</td>
<td>Susan</td>
<td>888 Bambi Way</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>5</td>
<td>James</td>
<td>112 Falcon Dr.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
<tr>
<td>6</td>
<td>Abby</td>
<td>6219 Pumpkin Ln.</td>
<td>Ohio</td>
<td>43233</td>
</tr>
</tbody>
</table>
</div>
I am trying to get a space of ~20 px between the red tr border and the blue border of the table but only in the tbody not it in the thead.
I tried to use padding on the tr but this does not work.
table {
width: 100%;
border: 3px solid blue;
border-collapse: collapse;
}
thead {
background-color: green;
}
tr {
height:50px;
}
tr {
box-sizing: border-box;
border-bottom: 2px solid red;
}
<table>
<thead>
<tr>
<td>FooHead</td>
<td>BarHead</td>
<td>BazHead</td>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</tbody>
</table>
Any suggestions?
One trick you can use is to scale the trs in the tbody horizontally, so that they no longer are as wide as the table.
If you do that, you'll have to adjust some of the other CSS as well; for instance you can no longer use border-collapse: collapse, since this makes the horizontal lines connect to the vertical.
table {
width: 100%;
border: 3px solid blue;
border-spacing: 0;
}
thead {
background-color: green;
}
tr {
height: 50px;
border-bottom: 2px solid red;
}
tbody tr {
transform: scaleX(.95);
}
tbody td {
border-bottom: 2px solid red;
}
<table>
<thead>
<tr>
<td>FooHead</td>
<td>BarHead</td>
<td>BazHead</td>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</tbody>
</table>
I would try to use :after of <td> selector to display the bottom line instead of using <tr> border
But this would be a bit tricky.
However, with this trick, you can apply a padding-left to your first column (the bottom line will follow).. And you can change the width of the last td:after with a calc(100 - 20px)
table {
width: 100%;
border: 3px solid blue;
border-collapse: collapse;
}
thead {
background-color: green;
}
tr {
height:50px;
}
tr {
box-sizing: border-box;
}
tbody td {
position: relative;
}
tbody td:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: red;
bottom: 0;
}
tbody tr:last-of-type td:after {
display: none;
}
td:first-of-type {
padding-left: 20px;
}
tbody td:last-of-type:after {
width: calc(100% - 20px);
}
<table>
<thead>
<tr>
<td>FooHead</td>
<td>BarHead</td>
<td>BazHead</td>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
<tr>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</tbody>
</table>
I want to add the border-radius style on the <tbody> element.
<table>
<thead>...</thead>
<tbody style="border: 1px solid red; border-radius: 12px;">
<tr>
<td>...</td>
</tr>
</tbody>
</table>
The border renders correctly, unfortunately without rounding.
You can try using box-shadow along with border-radius.
tbody {
box-shadow: 0 0 0 1px red;
border-radius: 10px;
}
<table>
<thead>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
Here is a solution that works for me :
body {
background-color: #2b7b2b;
}
table tbody {
background-color: white;
}
table tbody td {
display: table-cell
}
table tbody tr:first-child td:first-child {
border-top-left-radius: 5px;
}
table tbody tr:first-child td:last-child {
border-top-right-radius: 5px;
}
table tbody tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
table tbody tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}
<div class="body">
<table>
<thead>
<tr>
<td>column 1</td>
<td>column 2</td>
<td>column 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
tbody{
display:table;
border: 1px solid red;
border-radius: 12px;
}
<table>
<thead>
<th>head...</th>
</thead>
<tbody >
<tr>
<td>test...</td>
</tr>
</tbody>
</table>
table{
width: 100%;
border-collapse: collapse;
}
table td{
padding: 5px;
}
table tbody td{
border: 1px solid #19dbd0;
text-align: center;
}
table tbody tr:first-child td {
border-top: none;
border-right: none;
}
table tbody tr:last-child td {
border-bottom: none;
border-right: none;
}
table tbody tr td:first-child {
border-left: none;
}
table tbody{
box-shadow: 0 0 0 2px #19dbd0;
border-radius: 10px;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</tbody>
</table>
collapse the borders in the table
border-collapse: collapse;
try adding this in the tbody style
display:block
see similar question here
Is there a clean way to get borders on a in pure CSS?
I would suggest using a separate style, such as a <style> tag or an external style sheet, rather than styling inline.
<table id="myTable">
<thead>header</thead>
<tbody >
<tr>
<td>td content</td>
</tr>
</tbody>
</table>
<style>
#myTable{
border: 1px solid black;
border-radius: 12px;
}
</style>
I have a table with border-collapse applied. I want to remove some td border such as border-right within the table. I used the following css to do the job but this code also remove 1px of the other borders I don't want to remove. In fact it adds 1px solid white to the top and bottom border of the table where the removed border-right was there
.no-border-right {
border-right: solid 10px #FFF!important;
}
table {
border-collapse: collapse;
font-size: 16px;
padding: 6px;
}
table td {
border: 10px solid gray;
}
table th {
border: 10px solid gray;
}
<table align="center">
<tr>
<th>sl</th>
<th>name</th>
<th>score</th>
<th>rank</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td class="no-border-right">James</td>
<td>1</td>
<td>2</td>
</tr>
</table>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td class="no-border-right"></td>
<td></td>
</tr>
</table>
How can I remove without affecting the other borders?
My expected result from the snippet is below:
table {
border-collapse: collapse;
padding: 6px;
}
table td, table th {
border: 1px solid gray;
}
table td.no-border-right {
border-right: none!important;
}
table td.no-border-right + td {
border-left: none!important;
}
<table align="center">
<tr>
<th>sl</th>
<th>name</th>
<th>score</th>
<th>rank</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td class="no-border-right">James</td>
<td>1</td>
<td>2</td>
</tr>
</table>
You need to use the border-right: none; that should do it for you, also I left you a code snippet down there if you get stuck.
.no-border-right {
border: 1px solid red;
display: inline-block;
/* from here up is not it's necessary just to help visually see it demonstration */
border-right: none; /* Use this to remove right border */
}
<div class="no-border-right">
<p>Hello Wolrd!</p>
</div>
Make the right-border color's alpha 0 like so:
border-right { 10px solid rgba(0,0,0,0); }
.no-border-right {
border-right: 10px solid rgba(0,0,0,0);
}
table {
border-collapse: collapse;
font-size: 16px;
padding: 6px;
}
table td {
border: 10px solid gray;
}
table th {
border: 10px solid gray;
}
<table align="center">
<tr>
<th>sl</th>
<th>name</th>
<th>score</th>
<th>rank</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>2</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td class="no-border-right">James</td>
<td>1</td>
<td>2</td>
</tr>
</table>
I'm trying to style table with what I thought would be a fairly simple style to achieve but have run in to a little issue.
The table will show a coloured indicator on the left hand side of each row so I'm using border-left: 5px solid red; to add it. However, although the border applies - half of it is inside the row and half outside. I've tried adding border-collapse: collapse to no avail, I'm also using box-sizing: border-box but still have the same issue.
Finally, I've also tried adding the border to the first-child cell (td) but the same issue appears.
I've set up an example of what's happening - I've put in an oversized border to highlight the issue:
http://www.cssdesk.com/TVa67
Has anyone run into this before or have any solutions?
body {
background: blue;
}
table {
border-collapse: collapse;
box-sizing: border-box;
table-layout: fixed;
width: 100%;
}
th,
td {
background-color: #fff;
padding: 10px 15px 8px;
}
th {
border-bottom: 1px solid blue;
font-weight: normal;
text-align: left;
}
td {
border-bottom: 1px solid gray;
}
tr.low {
border-left: 25px solid red;
}
<table style="
border-collapse: collapse;
">
<tbody>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Age</th>
</tr>
<tr class="low">
<td>1</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
</tbody>
</table>
However, although the border applies - half of it is inside the row
and half outside
This behaviour is expected and is as per specs. Refer to: http://www.w3.org/TR/CSS2/tables.html#collapsing-borders where it says:
Borders are centered on the grid lines between the cells...
It also illustrates that with a diagram with description.
Has anyone run into this before or have any solutions?
Yes, it can be easily demonstrated as in this fiddle: http://jsfiddle.net/abhitalks/xs7L9wn1/1/ and the below Snippet:
* { box-sizing: border-box; }
table {
border-collapse: collapse;
border: 1px solid gray;
table-layout: fixed; width: 70%;
margin: 0 auto;
}
th, td {
border: 1px solid gray;
padding: 6px;
text-align: center;
}
tbody > tr:nth-child(1) > td:first-child { border-left: 16px solid red; }
tbody > tr:nth-child(2) > td:first-child { border-left: 8px solid green; }
tbody > tr:nth-child(3) > td:first-child { border-left: 24px solid blue; }
tbody > tr:nth-child(1) > td:last-child { border-left: 16px solid red; }
tbody > tr:nth-child(2) > td:last-child { border-left: 8px solid green; }
tbody > tr:nth-child(3) > td:last-child { border-left: 24px solid blue; }
<table>
<thead>
<tr>
<th>#</th>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Caption</td>
<td>Description</td>
</tr>
<tr>
<td>2</td>
<td>Caption</td>
<td>Description</td>
</tr>
<tr>
<td>3</td>
<td>Caption</td>
<td>Description</td>
</tr>
</tbody>
</table>
Solution:
Just add a transparent border of the same width to all rows. That way the border-width will be same and it will neatly align. (Update: added a white border-left to first column to hide the hanging border on highlighted cell. As pointed out by your comment.)
th, td { border-left: 15px solid transparent; }
tr > td:first-child, tr > th:first-child { border-left: 5px solid #fff; }
tr.low > td:first-child { border-left: 5px solid red; }
Example Fiddle: https://jsfiddle.net/abhitalks/s9taanz7/5/
Snippet:
* { box-sizing: border-box; }
body { background-color: blue; }
table {
border-collapse: collapse;
table-layout: fixed; width: 100%;
}
th, td {
background-color: #fff;
padding: 10px 15px 8px 8px;
border-left: 5px solid transparent;
border-bottom: 1px solid gray;
}
th {
border-bottom: 1px solid blue;
font-weight: normal; text-align: left;
}
tr > td:first-child, tr > th:first-child { border-left: 10px solid #fff; }
tr.low > td:first-child { border-left: 10px solid red; }
<table>
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="">
<td>1</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="low">
<td>2</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="">
<td>3</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
</tbody>
</table>
However, this approach will have a side-effect of hidden border-bottom because the border-left overlaps it.
Solution 2:
You could have an extra cell on the left to use as indicator. You can then control this by use of colgroup. This approach is neater than above and also requires you to have the width specified only once in css.
Example Fiddle 2: http://jsfiddle.net/abhitalks/z7u1nhwt/1/
Snippet 2:
* { box-sizing: border-box; }
body { background-color: blue; }
table {
border-collapse: collapse;
table-layout: fixed; width: 100%;
}
th, td {
background-color: #fff;
padding: 10px 15px 8px 8px;
border-bottom: 1px solid gray;
}
th {
border-bottom: 1px solid blue;
font-weight: normal; text-align: left;
}
.col1 { width: 10px; }
tr.low > td:first-child {
background-color: #f00;
}
<table>
<colgroup>
<col class="col1" />
<col class="coln" span="6" />
</colgroup>
<thead>
<tr>
<th></th>
<th>#</th>
<th>Status</th>
<th>Title</th>
<th>Project</th>
<th>Assigned To</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="">
<td></td>
<td>1</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="low">
<td></td>
<td>2</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
<tr class="">
<td></td>
<td>3</td>
<td>New</td>
<td>This is an example ticket</td>
<td>Something</td>
<td>Something</td>
<td>2 days ago</td>
</tr>
</tbody>
</table>
And of course, you can also try the approach of using pseudo-element as proposed by #misterManSam, depending on ease of implementation for you.