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;
}
Related
I have this code to make td's odds and evens background color For ROWS
so if someone got a new high score number a new td will be added
and be colored automatically
It's not working like you see in the screenshot. Wwhat's the solution?
th {
height: 30px;
margin-top: 15px;
background-color: white;
}
tr {
background-color: #fff;
padding: 20px;
font-size: 20px;
}
tr:nth-child(even) {
background: #f3f1f1
}
<table id="scoreboard" CELLSPACING=0 CELLPADDING=5>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>AAA </td>
<td>1</td>
</tr>
<tr>
<td>BBB </td>
<td>2</td>
</tr>
<tr>
<td>CCC </td>
<td>3</td>
</tr>
</table>
You are using the style on the td tag. That's why it's not working
Use it in tr
tr {
background-color: #c4c4c4;
}
If you want the ROWS to change colour, then use the CSS on the rows
th {
height: 30px;
margin-top: 15px;
background-color: white;
}
tr {
background-color: #fff;
padding: 20px;
font-size: 20px;
}
tr:nth-child(even) {
background: #f3f1f1
}
<table id="scoreboard" CELLSPACING=0 CELLPADDING=5>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Name 1</td>
<td>Score 1</td>
</tr>
<tr>
<td>Name 2</td>
<td>Score 2</td>
</tr>
</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>
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 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;
}