Responsive Table HTML example

Saturday, January 20, 2024
Book # Title Year Author/Illustrator Notes:
Book ##1 TitleThree Kittens, The Year1942 Author/IllustratorMarsha/Unknown Notes:Flipbook
Book ##2 Titlerow2 column2 Yearrow2 column3 Author/Illustratorrow2 column4 Notes:row2 column5
Book ##3 Titlerow3 column2 Yearrow3 column3 Author/Illustratorrow3 column4 Notes:row3 column5
Book ##4 Titlerow4 column2 Yearrow4 column3 Author/Illustratorrow4 column4 Notes:row4 column5
Book ##5 Titlerow5 column2 Yearrow5 column3 Author/Illustratorrow5 column4 Notes:row5 column5
Book ##6 Titlerow6 column2 Yearrow6 column3 Author/Illustratorrow6 column4 Notes:row6 column5
Book ##7 Titlerow7 column2 Yearrow7 column3 Author/Illustratorrow7 column4 Notes:row7 column5
Book ##8 Titlerow8 column2 Yearrow8 column3 Author/Illustratorrow8 column4 Notes:row8 column5
Book ##9 Titlerow9 column2 Yearrow9 column3 Author/Illustratorrow9 column4 Notes:row9 column5
Book ##10 Titlerow10 column2 Yearrow10 column3 Author/Illustratorrow10 column4 Notes:row10 column5


<p><br /></p>
<H3>HTML Code</H3>
<PRE>
<style>
table {border: 1px solid #000000;border-collapse: collapse; margin: 0 auto;  padding: 0px;table-layout: fixed;min-width: 100%;}table th {text-align: center;padding: 8px;border: 1px solid #000000;background:#187fa5;color:#FFFFFF;font-weight:bold;text-align:center}table td{padding: 8px;border: 1px solid #000000;}table tr{background-color: #f7f7f7;color:#000000;text-align:left;}table tr:hover {background-color: #AAAAAA;color: #FFFFFF;}table .mobile-head {display:none;}@media screen and (max-width: 600px) {table {border: 1px solid #000000;border-collapse: collapse; margin: 0 auto;  padding: 0px;table-layout: fixed;min-width: 100%;}table td{padding: 8px;border: 1px solid #000000;display: block;text-align: right;width: 100%\9;  float: left\9;}table tr{background-color: #f5f5f5;color:#000000;text-align:right;margin:8px}table tr:first-child {display:none;}table tr{display: block;}table td:not(:first-child){border-top:0px;}table .mobile-head{font-weight:bold;color:#000000;float:left;text-align:left;display:block}}
</style>
<table>
<tr>
<th>Book #</th>
<th>Title</th>
<th>Year</th>
<th>Author/Illustrator</th>
<th>Notes:</th>

</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#1</td>
<td><span class='mobile-head'>Title</span>Three Kittens, The</td>
<td><span class='mobile-head'>Year</span>1942</td>
<td><span class='mobile-head'>Author/Illustrator</span>Marsha/Unknown</td>
<td><span class='mobile-head'>Notes:</span>Flipbook</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#2</td>
<td><span class='mobile-head'>Title</span>row2 column2</td>
<td><span class='mobile-head'>Year</span>row2 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row2 column4</td>
<td><span class='mobile-head'>Notes:</span>row2 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#3</td>
<td><span class='mobile-head'>Title</span>row3 column2</td>
<td><span class='mobile-head'>Year</span>row3 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row3 column4</td>
<td><span class='mobile-head'>Notes:</span>row3 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#4</td>
<td><span class='mobile-head'>Title</span>row4 column2</td>
<td><span class='mobile-head'>Year</span>row4 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row4 column4</td>
<td><span class='mobile-head'>Notes:</span>row4 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#5</td>
<td><span class='mobile-head'>Title</span>row5 column2</td>
<td><span class='mobile-head'>Year</span>row5 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row5 column4</td>
<td><span class='mobile-head'>Notes:</span>row5 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#6</td>
<td><span class='mobile-head'>Title</span>row6 column2</td>
<td><span class='mobile-head'>Year</span>row6 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row6 column4</td>
<td><span class='mobile-head'>Notes:</span>row6 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#7</td>
<td><span class='mobile-head'>Title</span>row7 column2</td>
<td><span class='mobile-head'>Year</span>row7 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row7 column4</td>
<td><span class='mobile-head'>Notes:</span>row7 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#8</td>
<td><span class='mobile-head'>Title</span>row8 column2</td>
<td><span class='mobile-head'>Year</span>row8 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row8 column4</td>
<td><span class='mobile-head'>Notes:</span>row8 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#9</td>
<td><span class='mobile-head'>Title</span>row9 column2</td>
<td><span class='mobile-head'>Year</span>row9 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row9 column4</td>
<td><span class='mobile-head'>Notes:</span>row9 column5</td>
</tr>
<tr>
<td><span class='mobile-head'>Book #</span>#10</td>
<td><span class='mobile-head'>Title</span>row10 column2</td>
<td><span class='mobile-head'>Year</span>row10 column3</td>
<td><span class='mobile-head'>Author/Illustrator</span>row10 column4</td>
<td><span class='mobile-head'>Notes:</span>row10 column5</td>
</tr>
</table></PRE>


Thanks For Visiting
Copyright © 2018 - Creative eXpressions
Sources: ... FlipBook ... Scribed ... PDF
This Site is in no way apart of, with, or associated with The Walt Disney Company. Some content is Copyright © The Walt Disney Company. No parts of this site are to be reproduced without written permission. 
These books are for educational purposes only!! 
**FAIR USE** Copyright Disclaimer under section 107 of the Copyright Act 1976, allowance is made for “fair use” for purposes such as criticism, comment, news reporting, teaching, scholarship, education and research.
Tags
Reactions