<table className="table-auto bg-orange-500">
<thead>
<tr>
<th>Song</th>
<th>Artist</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<tr className="bg-orange-500">
<td>
The Sliding Mr.
Boaosjdofijasodifjoasidjfoiasdjfoisajdfoijasdoifjsaoidfjoasidjfaoisjdfoisjdofijnes
(Next Stop, Pottersville)
</td>
<td>Malcolm Lockyer</td>
<td>1961</td>
</tr>
<tr>
<td>Witchy Woman</td>
<td>The Eagles</td>
<td>1972</td>
</tr>
<tr>
<td>Shining Star</td>
<td>Earth, Wind, and Fire</td>
<td>1975</td>
</tr>
</tbody>
</table>
I have this table example from Tailwind. I want to change the background color for the even number of the item.
#layer utilities {
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
.tr:nth-child(even) {
background-color: #ccc;
}
.tr:nth-child(od) {
background-color: #fff;
}
}
I tried something like this and also wanted to change the background color of the thead.
I did <thead className="bg-orange-500"> and nothing happens to its background. I couldn't find any information about the background color of the table on the doc.
There are two mistakes
You are using class selector . for a element type .
Change:
.tr:nth-child(even) {
background-color: #ccc;
}
to:
tr:nth-child(even) {
background-color: #ccc;
}
Spelling of odd has become od in your code.
For thead bg-color try the following code:
<table class="table-auto">
<thead class="bg-cyan-300">
<tr>
<th class="px-4 py-2">Item</th>
<th class="px-4 py-2">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td class="px-4 py-2">Item 1</td>
<td class="px-4 py-2">Value 1</td>
</tr>
<tr>
<td class="px-4 py-2">Item 2</td>
<td class="px-4 py-2">Value 2</td>
</tr>
<tr>
<td class="px-4 py-2">Item 3</td>
<td class="px-4 py-2">Value 3</td>
</tr>
<tr>
<td class="px-4 py-2">Item 4</td>
<td class="px-4 py-2">Value 4</td>
</tr>
</tbody>
</table>
<style>
tbody tr:nth-child(even) {
background-color: #ccc;
}
tbody tr:nth-child(odd) {
background-color: #ffec20;
}
</style>
Output:
I'm looking to structure the tables in this way:
I tried doing that but I don't know how to put two columns inside a row (inch, cm)
It's a clothing store of a friend so I'd appreciate any help in this.
Did you try to do like this?
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
text-align:center;
}
.title{
background-color:red;
}
.sub-title{
background-color:lightgreen;
}
.footer{
background-color:lightcoral;
}
<table>
<thead>
<tr class="title">
<th colspan="7">Size Table</th>
</tr>
<tr class="sub-title">
<th rowspan="2"></th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
<th colspan="2">Bust</th>
</tr>
<tr class="sub-title">
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
<th>CH</th>
<th>CM</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>M</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
<tr>
<td>L</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>Col4</td>
<td>Col5</td>
<td>Col6</td>
</tr>
</tbody>
<tfoot>
<tr class="footer">
<th colspan="7">description</th>
</tr>
</tfoot>
</table>
this code will help you. check the below jsfiddle link
https://jsfiddle.net/Gurmatpal/aq9Laaew/221894/
Check This Code. I think this will help you
table {
empty-cells: show;
border: 1px solid #000;
}
table td,
table th {
min-width: 2em;
min-height: 2em;
border: 1px solid #000;
}
<table>
<thead>
<tr>
<th rowspan="2"></th>
<th colspan="2"> </th>
<th colspan="2"> </th>
</tr>
<tr>
<th>a</th>
<th>b</th>
<th>c</th>
<th>d</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
Hello I have these following tables for which I want same vertical line. please check my code here link I have two vertical tables, I want same vertical line of alignment for both the tables so that The line between two tables appears same though the tables are different.
Here is what I want
Here is what I am getting if I add text to th .
please tell me how can I make it better.
table,
th,
td {
border: 1px solid black;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td>$100</td>
</tr>
<tr>
<th>February</th>
<td>$80</td>
</tr>
</table>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td>$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td>$80</td>
</tr>
</table>
You could simply specify the width for the th and td elements, say 50%.
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
table th {
text-align: left;
}
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
<table style="width:100%" cellpadding="10px" cellspacing="1px" padding="20px">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
what I did is put the two tables in another table which has 2 rows to perfectly match vertical alignment
table, th, td {
border: 1px solid black;
}
table th, table td {
width: 50%;
}
<table>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Month</th>
<td>Savings</td>
</tr>
<tr>
<th>January</th>
<td >$100</td>
</tr>
<tr>
<th>February</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table style="width:100%">
<tr>
<th>Monthasnsandf</th>
<td>Savings</td>
</tr>
<tr>
<th>Januarydfsadfas</th>
<td >$100</td>
</tr>
<tr>
<th>Februarydfsadfsafa</th>
<td >$80</td>
</tr>
</table>
</td>
</tr>
</table>
I assume this is what you expect!
I have the following table:
<table class="table table66 table-bordered">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Alan</td>
<td>11</td>
</tr>
</tbody>
I want to highlight the cell I'm hovering, not the entire row. I've tried this with no success:
td.table66:hover {
background-color: #C0C0C0;
}
Try
.table66 td:hover {
background-color: #C0C0C0;
}
What you are doing in your sample is trying to select a td which also has the class table66, when it is your table which has the class.
Try this.
.table66 td:hover {
background-color: #C0C0C0;
}
I want to make header of my table fixed. Table is present inside the scrollable div. Below is my code.
<div id="table-wrapper">
<div id="table-scroll">
<table bgcolor="white" border="0" cellpadding="0" cellspacing="0" id="header-fixed" width="100%" overflow="scroll" class="scrollTable">
<thead>
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Status</th>
<th>Vol Number</th>
<th>Bonus Paid</th>
<th>Reason for no Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<td><%=snd.getOrderId()%></td>
<td><%=snd.getDateCaptured()%></td>
<td><%=snd.getOrderStatus()%></td>
<td>Data Not Available</td>
<td>Data Not Available</td>
<td>Data Not Available</td>
</tr>
</tbody>
</table>
</div>
</div>
Below is my CSS, which I am using for the above div:
#table-wrapper {
position:relative;
}
#table-scroll {
height:250px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100%;
}
#table-wrapper table * {
background:white;
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
How about doing something like this? I've made it from scratch...
What I've done is used 2 tables, one for header, which will be static always, and the other table renders cells, which I've wrapped using a div element with a fixed height, and to enable scroll, am using overflow-y: auto;
Also make sure you use table-layout: fixed; with fixed width td elements so that your table doesn't break when a string without white space is used, so inorder to break that string am using word-wrap: break-word;
Demo
.wrap {
width: 352px;
}
.wrap table {
width: 300px;
table-layout: fixed;
}
table tr td {
padding: 5px;
border: 1px solid #eee;
width: 100px;
word-wrap: break-word;
}
table.head tr td {
background: #eee;
}
.inner_table {
height: 100px;
overflow-y: auto;
}
<div class="wrap">
<table class="head">
<tr>
<td>Head 1</td>
<td>Head 1</td>
<td>Head 1</td>
</tr>
</table>
<div class="inner_table">
<table>
<tr>
<td>Body 1</td>
<td>Body 1</td>
<td>Body 1</td>
</tr>
<!-- Some more tr's -->
</table>
</div>
</div>
Using position: sticky on th will do the trick.
Note: if you use position: sticky on thead or tr, it won't work.
https://jsfiddle.net/hrg3tmxj/
Some of these answers seem unnecessarily complex. Make your tbody:
display: block; height: 300px; overflow-y: auto
Then manually set the widths of each column so that the thead and tbody columns are the same width. Setting the table's style="table-layout: fixed" may also be necessary.
None of the other examples provided worked in my case - e.g. header would not match table body content when scrolling. I found a much simpler and clean way, allowing you to setup the table the normal way, and without too much code.
Example:
.table-wrapper{
overflow-y: scroll;
height: 100px;
}
.table-wrapper th{
position: sticky;
top: 0;
background-color: #FFF;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
</div>
Thanks to https://algoart.fr/articles/css-table-fixed-header
I think you need something like this ?
.....
<style>
.table{width: 500px;height: 200px;border-collapse:collapse;}
.table-wrap{max-height: 200px;width:100%;overflow-y:auto;overflow-x:hidden;}
.table-dalam{height:300px;width:500px;border-collapse:collapse;}
.td-nya{border-left:1px solid white;border-right:1px solid grey;border-bottom:1px solid grey;}
</style>
<table class="table">
<thead>
<tr>
<th>Judul1</th>
<th>Judul2</th>
<th>Judul3</th>
<th>Judul4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">
<div class="table-wrap" >
<table class="table-dalam">
<tbody>
<?php foreach(range(1,10) as $i): ?>
<tr >
<td class="td-nya">td1 </td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
<td class="td-nya">td2</td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Source
I needed the same and this solution worked the most simple and straightforward way:
http://www.farinspace.com/jquery-scrollable-table-plugin/
I just give an id to the table I want to scroll and put one line in Javascript. That's it!
By the way, first I also thought I want to use a scrollable div, but it is not necessary at all. You can use a div and put it into it, but this solution does just what we need: scrolls the table.
This is my "crutches" solution by using html and css.
There used 2 tables and fixed width of tables and table cell`s
https://jsfiddle.net/babaikawow/s2xyct24/1/
HTML:
<div class="container">
<table class="table" border = 1; > <!-- fixed width header -->
<thead >
<tr>
<th class="tbDataId" >№</th>
<th class="tbDataName">Працівник</th>
<th class="tbDataData">Дата</th>
<th class="tbDataData">Дійсно до</th>
<th class="tbDataDiseases">Критерій1</th>
<th class="tbDataDiseases">Критерій2</th>
<th class="tbDataDiseases">Критерій3</th>
<th class="tbDataDiseases">Критерій4</th>
<th class="tbDataDiseases">Критерій5</th>
</tr>
</thead>
</table>
<div class="scrollTable"> <!-- scrolling block -->
<table class="table" border = 1;>
<tbody>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
<tr>
<td class="tbDataId" >№</td>
<td class="tbDataName">Працівник</td>
<td class="tbDataData">Дата</td>
<td class="tbDataData">Дійсно до</td>
<td class="tbDataDiseases">Критерій1</td>
<td class="tbDataDiseases">Критерій2</td>
<td class="tbDataDiseases">Критерій3</td>
<td class="tbDataDiseases">Критерій4</td>
<td class="tbDataDiseases">Критерій5</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
*{
box-sizing: border-box;
}
.container{
width:1000px;
}
.scrollTable{
overflow: scroll;
overflow-x: hidden;
height: 100px;
}
table{
margin: 0px!important;
width:983px!important;
border-collapse: collapse;
}
/* Styles of the th and td */
/* Id */
.tbDataId{
width:5%;
}
/* Дата,
Дійсно до */
.tbDataData{
/*width:170px;*/
width: 15%;
}
/* П І Б */
.tbDataName{
width: 15%;
}
/*Критерії */
.tbDataDiseases{
width:10%;
}
A Fiddle would have been more helpful nevertheless from what I understand, I guess what you need is persistent headers, look into this
http://css-tricks.com/persistent-headers/
This code works form me. Include the jquery.js file.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
var headerDivWidth=0;
var contentDivWidth=0;
function fixHeader(){
var contentDivId = "contentDiv";
var headerDivId = "headerDiv";
var header = document.createElement('table');
var headerRow = document.getElementById('tableColumnHeadings');
/*Start : Place header table inside <DIV> and place this <DIV> before content table*/
var headerDiv = "<div id='"+headerDivId+"' style='width:500px;overflow-x:hidden;overflow-y:scroll' class='tableColumnHeadings'><table></table></div>";
$(headerRow).wrap(headerDiv);
$("#"+headerDivId).insertBefore("#"+contentDivId);
/*End : Place header table inside <DIV> and place this <DIV> before content table*/
fixColumnWidths(headerDivId,contentDivId);
}
function fixColumnWidths(headerDivId,contentDivId){
/*Start : Place header row cell and content table first row cell inside <DIV>*/
var contentFirstRowCells = $('#'+contentDivId+' table tr:first-child td');
for (k = 0; k < contentFirstRowCells.length; k++) {
$( contentFirstRowCells[k] ).wrapInner( "<div ></div>");
}
var headerFirstRowCells = $('#'+headerDivId+' table tr:first-child td');
for (k = 0; k < headerFirstRowCells.length; k++) {
$( headerFirstRowCells[k] ).wrapInner( "<div></div>");
}
/*End : Place header row cell and content table first row cell inside <DIV>*/
/*Start : Fix width for columns of header cells and content first ror cells*/
var headerColumns = $('#'+headerDivId+' table tr:first-child td div:first-child');
var contentColumns = $('#'+contentDivId+' table tr:first-child td div:first-child');
for (i = 0; i < contentColumns.length; i++) {
if (i == contentColumns.length - 1) {
contentCellWidth = contentColumns[i].offsetWidth;
}
else {
contentCellWidth = contentColumns[i].offsetWidth;
}
headerCellWidth = headerColumns[i].offsetWidth;
if(contentCellWidth>headerCellWidth){
$(headerColumns[i]).css('width', contentCellWidth+"px");
$(contentColumns[i]).css('width', contentCellWidth+"px");
}else{
$(headerColumns[i]).css('width', headerCellWidth+"px");
$(contentColumns[i]).css('width', headerCellWidth+"px");
}
}
/*End : Fix width for columns of header and columns of content table first row*/
}
function OnScrollDiv(Scrollablediv) {
document.getElementById('headerDiv').scrollLeft = Scrollablediv.scrollLeft;
}
function radioCount(){
alert(document.form.elements.length);
}
</script>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
th,td
{
padding:5px;
}
</style>
</head>
<body onload="fixHeader();">
<form id="form" name="form">
<div id="contentDiv" style="width:500px;height:100px;overflow:auto;" onscroll="OnScrollDiv(this)">
<table>
<!--tr id="tableColumnHeadings" class="tableColumnHeadings">
<td><div>Firstname</div></td>
<td><div>Lastname</div></td>
<td><div>Points</div></td>
</tr>
<tr>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr-->
<tr id="tableColumnHeadings" class="tableColumnHeadings">
<td> </td>
<td>Firstname</td>
<td>Lastname</td>
<td>Points</td>
</tr>
<tr style="height:0px">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID" onclick="javascript:radioCount();"/></td>
<td>Jillsddddddddddddddddddddddddddd</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td><div>Jillsddddddddddddddddddddddddddd</div></td>
<td><div>Smith</div></td>
<td><div>50</div></td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>Eve</td>
<td>Jackson</td>
<td>9400000000000000000000000000000</td>
</tr>
<tr>
<td><input type="radio" id="SELECTED_ID" name="SELECTED_ID"/></td>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</form>
</body>
</html>
use StickyTableHeaders.js for this.
Header was transparent . so try to add this css .
thead {
border-top: none;
border-bottom: none;
background-color: #FFF;
}
I know this question is old, but if anyone have this same issue, an easy way without having to write lots of CSS, just wrap your <table> with <div> and your <div> should have a style with overflow-y: auto; and some height.
As below example:
<div style="overflow-y: auto; height: 400px;">
<table>...</table>
</div>
Add a style to the thead as below:
thead {
position: sticky;
top: 0;z-index: 2;
}