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;
}
Related
<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>
How do I hide an entire table column in printing mode (using JS javascript:print())?
Because I'm using Bootstrap I tried its .hidden-print class to hide the last column (Operation column) in printing mode:
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th class="hidden-print">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Neo</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<-- continued -->
</tr>
</tbody>
</table>
but it's only hide the column's content, displaying a column without content, when I need is it also hides TH and TD tags.
Is it possible to do this?
table,th,td {
border: 1px solid;
text-align: center;
}
table {
border-collapse: collapse;
width: 100%;
}
#media print {
table,th,td {
border: 0px
}
button {
display: none;
}
}
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th class="hidden-print">Operation</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John Smith</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
<td>2</td>
<td>Neo</td>
<td class="hidden-print">
Edit
Delete
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
<button onclick="window.print();">Print</button>
There are issues with adding display: none; (which is what .hidden-print does) to table rows and cells because removing them from the document flow could very easily mess up the table formatting (see this question).
What about using visibility: hidden; instead?
In your case, you could try this, if you wanted to always target the last column:
#media print {
th:last-child, td:last-child {
visibility: hidden;
}
}
I'm trying to color the even and odd elements of the table rows following the table row with class "ratingHead". When ".ratingHead" is reached the colors should restart.
This image of the table may be more clear
Here is the structure of the code
<table class="evalTable">
<thead>
<tr><th></th></tr>
</thead>
<tbody>
<tr class="tableHeadings"></tr>
<tr class="ratingHead"></tr>
<tr class="tableItems></tr>
<tr class="tableItems></tr>
<tr class="tableItems></tr>
<tr class="tableItems></tr>
<tr class="tableHeadings"></tr> <-- Keeps repeating based on how much information
<tr class="ratingHead"></tr> is dynamically generated from the database
<tr class="tableItems></tr> <------------------------------------------------------->
</body>
</table>
This is the css I have at the moment
tr.tableItems:nth-child(odd) {
background-color: rgb(233, 231, 239);
}
tr.tableItems:nth-child(even) {
background-color: #f9f9f9;
}
You cannot do that with the current html structure you have.
But you can have multiple tbody elements for the grouping (this way the odd/even is reset for the tr elements under a new tbody)
tr.tableItems:nth-child(odd) {
background-color: rgb(233, 231, 239);
}
tr.tableItems:nth-child(even) {
background-color: #f9f9f9;
}
<table class="evalTable">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr class="tableHeadings"><td>heading #1</td></tr>
<tr class="ratingHead"><td>Rating</td></tr>
<tr class="tableItems"><td>row #1.1</td></tr>
<tr class="tableItems"><td>row #1.2</td></tr>
<tr class="tableItems"><td>row #1.3</td></tr>
<tr class="tableItems"><td>row #1.4</td></tr>
</tbody>
<tbody>
<tr class="tableHeadings"><td>heading #2</td></tr>
<tr class="ratingHead"><td>Rating</td></tr>
<tr class="tableItems"><td>row #2.1</td></tr>
</tbody>
</table>
The best way to approach what you are trying to do is to use multiple adjacent tables, like this:
.eval h3, .eval td {
padding: 2px 10px;
}
.eval h3 {
color: rgb(233, 231, 239);
background: #5E4F67;
margin: 0;
font-weight: normal;
}
.eval table {
width: 100%;
margin: 0;
border-collapse: collapse;
}
tr.tableHeadings{
background: #9084A0;
}
tr.tableItems:nth-child(odd) {
background-color: rgb(233, 231, 239);
}
tr.tableItems:nth-child(even) {
background-color: #f9f9f9;
}
tr.tableItems td:nth-child(even) {
background-color: rgba(255,255,255,.5);
}
<div class="eval">
<h3>Chapter Heading</h3>
<table>
<thead>
<tr class="tableHeadings"><td colspan="3">Section Heading</td></tr>
<tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr>
</thead>
<tbody>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
</tbody>
</table>
<table>
<thead>
<tr class="tableHeadings"><td colspan="3">Section Heading</td></tr>
<tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr>
</thead>
<tbody>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
<tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>
<tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>
</tbody>
</table>
</div>
I think your syntax should be:
tr:nth-child(even) {background: #f9f9f9;}
tr:nth-child(odd) {background: rgb(233, 231, 239)}
I must be overlooking something and I can seem to figure it out. I applied borders to my table cells and they are not showing. Please can someone take a look at the markup and css below and help me out. Here is the static site I have applied the Myers CSS reset to my stylesheet, not sure if it makes a difference.
<table>
<caption>Your Upcoming Bill Due Dates</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Bill Due Date</th>
<th scope="col">Bill Name</th>
<th scope="col">Amount</th>
<th scope="col">Frequency</th>
<th scope="col">Last Paid</th>
</thead>
</tr>
<tr>
<td></td>
<td>March 7th, 2013</td>
<td>Childcare</td>
<td>$560</td>
<td>Weekly</td>
<td>February 26th, 2013</td>
</tr>
<tr>
<td></td>
<td>June 13th, 2013</td>
<td>Water Bill</td>
<td>$125.60</td>
<td>Monthly</td>
<td>May 2nd, 2013</td>
</tr>
</table>
And here is the CSS
table {
clear: both;
border: 2px solid blue;
border-collapse: separate;
}
td th {
border: 2px solid red;
}
you could change border-collapse:collapse; to border-spacing:0;, but
td th {
border: 2px solid red; }
should be written so
td ,th {
border: 2px solid red;
}
In your code there is an error on:
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Bill Due Date</th>
<th scope="col">Bill Name</th>
<th scope="col">Amount</th>
<th scope="col">Frequency</th>
<th scope="col">Last Paid</th>
</thead> /* HERE */
</tr>
IT MUST BE
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Bill Due Date</th>
<th scope="col">Bill Name</th>
<th scope="col">Amount</th>
<th scope="col">Frequency</th>
<th scope="col">Last Paid</th>
</tr>
</thead>
Also change td th { with td,th {
In your CSS, you need to add a , between td and th, otherwise it's only looking to apply the style to th which are children of td:
td, th {
border: 2px solid red;
}
Also, your HTML is a little out of order - the </thead> is before the closing </tr>. You've also specified a <thead> but no <tbody>...