I have a basic table and would like to show the first 3 rows under the header, then provide a scroll wheel to display the remaining 2 rows.
I have tried setting the height of the table and using overflow: scroll in various places but cannot get to work. I wasn't sure if this property could even be used on tables or if it was just for divs.
My code is below, many thanks in advance for any help.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
</style>
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</body>
You have to put the table inside a div and then set the height of the div to be smaller than the height of your table and overflow-y: scroll.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
.table-wrap {
height: 222px;
overflow-y: scroll;
display: inline-block;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
</div>
</body>
table {
border-collapse: collapse;
max-height: 50px;
overflow: auto;
}
th, td {
border: 1px solid black;
padding: 15px 100px;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>DOB</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Smith</td>
<td>26.01.1989</td>
<td>john#email.com</td>
</tr>
<tr>
<td>Rick Thompson</td>
<td>15.04.1995</td>
<td>rick#email.com</td>
</tr>
<tr>
<td>Tim Bloggs</td>
<td>03.02.2000</td>
<td>tim#email.com</td>
</tr>
<tr>
<td>Bob Roberton</td>
<td>11.04.1985</td>
<td>bob#email.com</td>
</tr>
<tr>
<td>Joe Bishop</td>
<td>03.02.2010</td>
<td>joe#email.com</td>
</tr>
</tbody>
</table>
Related
How to position a table on the right side of the screen? The desired output looks like this:
table on the right
How do we pull it off? Thanks!
The code I used is:
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
sometimes reading documentation may be useful
table,
th,
td {
border: 1px solid black;
}
table {
float: right;
}
<table>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
You can make the table right side by using following code:
table{
width: auto;
float: right;
}
table {
width: auto;
float: right;
}
<html>
<body>
<table>
<tr>
<td>
Item 1
</td>
<td>
Item 2
</td>
</tr>
</table>
</body>
</html>
The needed code to pull it off is:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
table, th, td {
border: 1px solid black;
}
table {float: right;}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Ouch</th>
</tr>
<tr>
<th colspan="2"><img src=AAAAAHjpg" alt="Posporo" width="300" height="300"></th>
</tr>
<tr>
<th colspan="2">Professional</th>
</tr>
<tr>
<th>Affiliation</th>
<td>Mafia</td>
</tr>
<tr>
<th>Profession</th>
<td>Eater</td>
</tr>
<tr>
<th>Partner</th>
<td>You</td>
</tr>
<tr>
<th>Base</th>
<td>Somewhere</td>
</tr>
<tr>
<th colspan="2">Personal</th>
</tr>
<tr>
<th>Education</th>
<td>Pamantasan ng Unibersidad ng Paaralan</td>
</tr>
<tr>
<th colspan="2">Signature</th>
</tr>
<tr>
<th colspan="2">gd jasdagjadgjd</th>
</tr>
</table>
</body>
</html>
How to select the th element of table without selecting it's child th? is it possible? is there any selector like so?
here is the demo:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
thead:first-of-type th {
background-color: gray;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
When i add the gray background it added with tables child elements of the too. is there any direct selector to only select the parent level th element?
Thanks in advance.
You need to add one class to the main table. Try this code
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
.parent-table>thead:first-of-type th {
background-color: gray;
}
<table class="parent-table">
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
You can try this:
table{
border-collapse: collapse;
width: 100%;
border: 1px solid gray;
}
table > thead:first-of-type > tr > th {
background-color: gray;
}
table > tbody > tr td table > thead:first-of-type > tr > th{
background-color: white;
}
<table>
<thead>
<tr>
<th>one</th>
<th>tow</th>
</tr>
</thead>
<thead>
<tr>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
<table>
<thead>
<tr>
<th>x</th>
<th>y</th>
</tr>
</thead>
</table>
</td>
</tr>
</tbody>
</table>
I have the following HTML table code:
<html>
<head>
<style>
table {
border-spacing: 0;
}
thead tr {
background: #36304a;
color: #fff;
}
thead th {
padding: 10px 25px;
}
thead th:first-child {
border-top-left-radius: 10px;
}
thead th:last-child {
border-top-right-radius: 10px;
}
tbody tr:nth-child(even) {
background: #f5f5f5;
}
tbody td {
padding: 10px 0 10px 25px;
}
.table-container {
margin-bottom: 20px;
}
.error {
background: #ff6d6c;
}
.success {
background: #c4e0b5;
}
.round-bottom {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom error">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Criteria</th>
<th>Expected Value</th>
<th>Result</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Abc</td>
<td>200</td>
<td>500</td>
<td>Fail</td>
</tr>
<tr>
<td>kuku</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td>lulu</td>
<td>200</td>
<td>500</td>
<td>OK</td>
</tr>
<tr>
<td colspan="4" class="round-bottom success">
gilbert
</td>
</tr>
</tbody>
</table>
</div>
</body>
When viewing the email on Outlook, the table does not render properly:
However, on Outlook on the Web it looks fine.
I read online that Outlook uses Word to render HTML, and it has some limitations - but I'm not sure how to get around these. I tried modifying background property to background-color but it didn't do the trick.
have a question. How to set the column layout so that the writing is parallel to the top, here is the code:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
I want a layout like the following, I want the second column text aligned with the first column:
make a vertical-align: top rule for th
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
td{
vertical-align: top;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
You should target the 2nd child and set vertical align to top
table tr td:nth-child(2) {
vertical-align: top
}
Live example
table,
td,
th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 10%;
}
th {
text-align: left;
}
table tr td:nth-child(2) {
vertical-align: top
}
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland Netherland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Reference
:nth-child()
vertical-align
After adding a background image to my table, the image is displaying over the table and the contents of the table are hidden. Why is this? HTML and CSS code is below:
.muscles_worked {
background-image: url(images/dumbbell.png);
border: 1px dashed black;
margin: 0 auto;
margin-top: 50px;
}
<table class="muscles_worked">
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>
A better way might be to set the table in a div and set the background on that.
div.muscles_worked {
background-image: url('http://placekitten.com/700/500?image=13');
margin: 0 auto;
margin-top: 50px;
display: inline-block;
}
.muscles_worked > table {
border: 1px dashed black;
}
<div class="muscles_worked">
<table>
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>
</div>
Hope it helps. Cheers!