I have to add an unnecessary span in my th elements in order to get the margin-top to work. Is there a CSS rule I can use to avoid this extra span?
http://jsfiddle.net/VywK7/1/
CSS
table
{
width:100%;
border:4px solid gray;
padding:2px;
}
thead
{
background-color:gray;
}
th span
{
display:block;
margin-top:-4px;
}
th, td
{
padding:2px;
}
HTML
<table>
<thead>
<tr>
<th><span>Month</span></th>
<th><span>Amount</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
</tbody>
</table>
Sure, here is your fiddle:
http://jsfiddle.net/VywK7/4/
CSS
table
{
width:100%;
border:4px solid gray;
padding:2px;
}
thead
{
background-color:gray;
}
td
{
padding:2px;
}
th
{
padding: 0 2px 5px;
line-height: 15px;
}
HTML
<table>
<thead>
<tr>
<th>Month</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$200</td>
</tr>
</tbody>
</table>
The -4px margin you added is caused by the borde around the table. So try to remove the top border and you do not need the <span>s (and corresponding CSS) anymore:
table
{
width:100%;
border:4px solid gray;
padding:2px;
border-top-width: 0px;
}
Related
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>
table{ width: 100%;max-width: 100%; margin-bottom: 20px;border:solid 1px #000; border-collapse: collapse;}
tbody tr{border:2px solid #256ac4;}
td{ color: #8d9097; vertical-align: top; font-size: 14px;}
th{text-align:left}
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>
i have coded this, expected result is in image but i am unable to add space between two rows, if i use border-collapse:seperate then space is coming but border is not applying.
https://ibb.co/b9WDn5
In the parent table, try setting
border-collapse:separate;
border-spacing:5em;
Try to refer this .
You should add a div where your content goes and style it to create the gap between rows.
So if we take the code from you example it will turn out like this.
HTML
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
<tr>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
<td>
<div>AA</div>
</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border-collapse: collapse;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
padding: 0;
}
td div {
margin-bottom: 10px;
border: 2px solid #256ac4;
}
td:first-child div {
border-left-width: 2px;
}
td:last-child div {
border-right-width: 2px;
}
thead {
border: solid 1px #000;
}
th {
text-align: left
}
https://jsfiddle.net/nvbza1u3/1/
Note how the border was added to the div and not the tr. Also I added the border to thead to make it look more like your example
I have fix this issue with float:left , check with this snippet
* { box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -webkit-box-sizing:border-box; }
table {
width: 100%;
max-width: 100%;
margin-bottom: 20px;
border: solid 1px #000;
border-collapse: collapse;
float:left;
}
thead {
float: left;
}
tbody tr {
border: 2px solid #256ac4;
float: left;
margin-bottom: 15px;
width: 100%;
}
td {
color: #8d9097;
vertical-align: top;
font-size: 14px;
}
th {
text-align: left
}
<body>
<table>
<thead>
<th>A</th>
<th>B</th>
<th>C</th>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
<tr>
<td>AA</td>
<td>AA</td>
<td>AA</td>
</tr>
</tbody>
</table>
If you see the table, you will notice that due to scroll bar on overflow alignment of table header & table rows mismatch.
How to maintain correct alignment among them in both cases: normal or overflow.
Here is the source code below.
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
html {
overflow-y: scroll;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: calc(100%);
}
th{
background-color: #2c3539;
color:white;
border: 1px solid black;
text-align: left;
padding: 8px;
}
td{
border: 1px solid black;
text-align: left;
padding: 8px;
}
<div>
<table class="table" id="dash-board" style="width: 50%;">
<thead>
<tr>
<th>Office</th>
<th>Total Task</th>
<th>Done</th>
<th>Not Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office-1</td>
<td>3</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>Office-2</td>
<td>7</td>
<td>0</td>
<td>7</td>
</tr>
<tr>
<td>Office-3</td>
<td>2</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Office-3</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
<div>
just remove
overflow:auto
from you css file...
here fiddle example
fiddle
For overflowing-y issue you can try width calc on thead you already set that but that calc not woring. Check the css below I just separet the thead and tbody tr class for calc the width. Check scroll-y is working.
.table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
tbody {
display:block;
height:100px;
overflow:auto;
}
tbody tr {
display:table;
width: calc(100% - 1px); /*this 1px is the border which cause the overflow-x*/
table-layout:fixed;
}
thead {
display:table;
width: calc(100% - 17.5px);/*thead Width - (Scrollbar width + border Width) */
table-layout:fixed;
}
th{
background-color: #2c3539;
color:white;
border: 1px solid black;
text-align: left;
padding: 8px;
}
td{
border: 1px solid black;
text-align: left;
padding: 8px;
}
<div>
<table class="table" id="dash-board" style="width: 50%;">
<thead>
<tr>
<th>Office</th>
<th>Total Task</th>
<th>Done</th>
<th>Not Done</th>
</tr>
</thead>
<tbody>
<tr>
<td>Office-1</td>
<td>3</td>
<td>0</td>
<td>3</td>
</tr>
<tr>
<td>Office-2</td>
<td>7</td>
<td>0</td>
<td>7</td>
</tr>
<tr>
<td>Office-3</td>
<td>2</td>
<td>0</td>
<td>2</td>
</tr>
<tr>
<td>Office-3</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
</tbody>
</table>
</div>
I have a table that gets added dynamically to my webpage.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
table#appraiserTable th {
background-color: black;
color: white;
}
I want to make it scrollable with the header fixed.
I can make the whole table scrollable by adding this code in CSS-
tbody {
display:block;
overflow-y:scroll;
height:100px;
}
But this makes the whole table scrollable; the header doesn't stay fixed. Also, the table has a border, how can I get rid of it?
Here you go jsfiddle
<body>
<table cellspacing="0" cellpadding="0">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
</table>
<div class="tb">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>01</td>
<td>$100</td>
</tr>
<tr>
<td>02</td>
<td>$80</td>
</tr>
<tr>
<td>03</td>
<td>$100</td>
</tr>
<tr>
<td>04</td>
<td>$80</td>
</tr>
<tr>
<td>05</td>
<td>$100</td>
</tr>
<tr>
<td>06</td>
<td>$80</td>
</tr>
</tbody>
</table>
</div>
</body>
CSS
table, th, td {
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: center;
}
table#appraiserTable th {
background-color: black;
color: white;
}
.tb {
height: 100px !important;
overflow: auto;
}
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.