Can any help me to make this code responsive on phone, so that the table will change its size accordingly and will appear properly on mobile displays. The table is broken or cut in half with certain screen sizes
<style>
#media only screen and (max-width: 600px) {
table {
width: 100%;
}
th, td {
font-size: 16px;
padding: 10px;
}
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
}
td, th {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #ffffff;
color: black;
text-align: left;
}
td:nth-child(1) {
width: 40%;
text-align: left;
}
td:nth-child(2) {
width: 20%;
text-align: right;
}
td:nth-child(3) {
width: 20%;
text-align: right;
}
tr:nth-child(1) {
background-color: #ffffff;
}
tr:nth-child(2) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
</style>
<table>
<tr>
<th colspan="3">Supplement Facts</th>
</tr>
<tr>
<th colspan="3"style="background-color: #f2f2f2;">Supplement Facts</th>
</tr>
<tr>
<th colspan="3" >Serving Size : 1 softgel</th>
</tr>
<tr>
<th colspan="3" style="background-color: #f2f2f2;">Supplement Facts: 120 </th>
</tr>
<td></td>
<td> Amount per serving</td>
<td>%Daily Value</td>
</tr>
<tr>
<td>Calories</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Total Fat</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Cholesterol</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Krill Oil Concentrate</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Phospholipids</td>
<td>10 </td>
<td> 10</td>
</tr>
<tr>
<td>Omega 3 Fatty Acids</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>EPA (eicosapentaenoic acid)</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>DHA (docosahexaenoic acid)</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Astaxanthin</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Omega 3 Fatty Acids</td>
<td> 10</td>
<td> 10</td>
</tr>
</table>
`
I tried 10 codes and some work on some sites others dont.
Trying to make table that is responsive on mobile.
It's showing like this on 600px where you add media query. In down snippet I add media query on 768px which is use for mobile.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
}
td, th {
border: 1px solid black;
padding: 8px;
}
th {
background-color: #ffffff;
color: black;
text-align: left;
}
td:nth-child(1) {
width: 40%;
text-align: left;
}
td:nth-child(2) {
width: 20%;
text-align: right;
}
td:nth-child(3) {
width: 20%;
text-align: right;
}
tr:nth-child(1) {
background-color: #ffffff;
}
tr:nth-child(2) {
background-color: #f2f2f2;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
#media only screen and (max-width: 768px) {
table {
width: 100%;
}
th, td {
font-size: 16px;
padding: 10px;
}
}
</style>
</head>
<body>
<table>
<tr>
<th colspan="3">Supplement Facts</th>
</tr>
<tr>
<th colspan="3"style="background-color: #f2f2f2;">Supplement Facts</th>
</tr>
<tr>
<th colspan="3" >Serving Size : 1 softgel</th>
</tr>
<tr>
<th colspan="3" style="background-color: #f2f2f2;">Supplement Facts: 120 </th>
</tr>
<tr>
<td></td>
<td> Amount per serving</td>
<td>%Daily Value</td>
</tr>
<tr>
<td>Calories</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Total Fat</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Cholesterol</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Krill Oil Concentrate</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Phospholipids</td>
<td>10 </td>
<td> 10</td>
</tr>
<tr>
<td>Omega 3 Fatty Acids</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>EPA (eicosapentaenoic acid)</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>DHA (docosahexaenoic acid)</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Astaxanthin</td>
<td> 10</td>
<td> 10</td>
</tr>
<tr>
<td>Omega 3 Fatty Acids</td>
<td> 10</td>
<td> 10</td>
</tr>
</table>
</body>
</html>
Related
I have added two tables to make thead section as fixed on the top.
The contents in the table (tbody) comes from database. So, the number of rows may have small or large number of rows.
Consider this code.
If tbody have few rows:
.tables {
padding: 20px;
}
table {
border: 1px solid #ddd;
text-align: left;
font-family: sans-serif;
font-size: 13px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 2px 5px;
}
.table-head table thead tr th:last-child {
width: 15%;
}
.tables .table-body {
max-height: 200px;
overflow-y: auto;
}
.table-body table tbody tr td:last-child {
width: 15%;
}
.table-body::-webkit-scrollbar {
width: 10px;
margin-right: -10px;
position: absolute;
height: 100%;
right: -10px;
}
.table-body::-webkit-scrollbar-track {
background: #f1f1f1;
}
.table-body::-webkit-scrollbar-thumb {
background: #888;
}
.tbl-fieldList .tbl-body-only::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="tables">
<div class="table-head">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Name</th>
<th><input type="checkbox"></th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
If tbody has large number of rows, the alignment of the table th and td gets distorted:
.tables {
padding: 20px;
}
table {
border: 1px solid #ddd;
text-align: left;
font-family: sans-serif;
font-size: 13px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 2px 5px;
}
.table-head table thead tr th:last-child {
width: 15%;
}
.tables .table-body {
max-height: 200px;
overflow-y: auto;
}
.table-body table tbody tr td:last-child {
width: 15%;
}
.table-body::-webkit-scrollbar {
width: 10px;
margin-right: -10px;
position: absolute;
height: 100%;
right: -10px;
}
.table-body::-webkit-scrollbar-track {
background: #f1f1f1;
}
.table-body::-webkit-scrollbar-thumb {
background: #888;
}
.tbl-fieldList .tbl-body-only::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="tables">
<div class="table-head">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Name</th>
<th><input type="checkbox"></th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
I have tried to make the custom scroll bar position to outside of the div, but it is not working. Anybody have an idea to solve this problem?
You need to add the custom scroll to 'table-head' and then add few lines of JavaScript :)
if (document.querySelector('.table-body table').offsetHeight > 200) { // same as max-height
document.querySelector('.table-head').style.overflowY = 'scroll';
}
.tables {
padding: 20px;
}
table {
border: 1px solid #ddd;
text-align: left;
font-family: sans-serif;
font-size: 13px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 2px 5px;
}
.table-head table thead tr th:last-child {
width: 15%;
}
.tables .table-body {
max-height: 200px;
overflow-y: auto;
}
.table-body table tbody tr td:last-child {
width: 15%;
}
.table-body::-webkit-scrollbar,
.table-head::-webkit-scrollbar {
width: 10px;
margin-right: -10px;
position: absolute;
height: 100%;
right: -10px;
}
.table-body::-webkit-scrollbar-track,
.table-head::-webkit-scrollbar-track {
background: #f1f1f1;
}
.table-body::-webkit-scrollbar-thumb {
background: #888;
}
.tbl-fieldList .tbl-body-only::-webkit-scrollbar-thumb:hover {
background: #555;
}
<div class="tables">
<div class="table-head">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th>Name</th>
<th><input type="checkbox"></th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td>Sample name</td>
<td><input type="checkbox"></td>
</tr>
</tbody>
</table>
</div>
</div>
I have this code of a table inside 2 wrapping divs, the external with display: table and the inner with display:table-cell; vertical-align: middle, so the table will display on the center of the screen.
But the problem is that my code is not displaying as expected when I resize the window to less than 550px. The table stop resizing below that width.
When I remove the .page and .vcenter wrappers, the table resizes as expected.
* {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/*************************************/
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
.page {
display: table;
text-align: center;
width: 100%;
height: 100%;
}
.vcenter {
display: table-cell;
vertical-align: middle;
}
/*************************************/
table {
display: flex;
overflow: hidden;
}
thead {
display: flex;
flex-shrink: 0;
width: 30%;
}
tbody {
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
width: 70%;
}
tr {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
td,
th {
display: block;
}
td {
border-left: 0;
}
td,
th {
border: 1px solid;
}
th:not(:last-child),
td:not(:last-child) {
border-bottom: 0;
}
tr {
width: 100%;
}
th {
background-color: DarkSlateBlue;
text-weight: bold;
color: white;
}
<div class="page">
<div class="vcenter">
<table>
<thead>
<tr>
<th> </th>
<th>Filipe</th>
<th>Crisp</th>
<th>Marco</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fase 1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 3</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 4</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 10</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 11</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 13</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 14</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 15</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
(Click on "view full page" and try resizing the window to less than 550px to see what happens)
What is going on?
you need to use table-layout: fixed
* {
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Chrome/Safari/Opera */
-khtml-user-select: none;
/* Konqueror */
-moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
/* Non-prefixed version, currently
not supported by any browser */
}
/*************************************/
html,
body {
margin: 0;
width: 100%;
height: 100%;
}
.page {
display: table;
table-layout: fixed;
text-align: center;
width: 100%;
height: 100%;
}
.vcenter {
display: table-cell;
vertical-align: middle;
}
/*************************************/
table {
display: flex;
overflow: hidden;
}
thead {
display: flex;
flex-shrink: 0;
width: 30%;
}
tbody {
display: flex;
position: relative;
overflow-x: auto;
overflow-y: hidden;
width: 70%;
}
tr {
display: flex;
flex-direction: column;
flex-shrink: 0;
}
td,
th {
display: block;
}
td {
border-left: 0;
}
td,
th {
border: 1px solid;
}
th:not(:last-child),
td:not(:last-child) {
border-bottom: 0;
}
tr {
width: 100%;
}
th {
background-color: DarkSlateBlue;
text-weight: bold;
color: white;
}
<div class="page">
<div class="vcenter">
<table>
<thead>
<tr>
<th> </th>
<th>Filipe</th>
<th>Crisp</th>
<th>Marco</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fase 1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 2</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 3</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 4</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 10</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 11</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 12</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 13</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 14</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Fase 15</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div>
</div>
I'm trying to use both padding and border-bottom in html to get this table:
But in order to make the border-bottom one line I added border-collapse: collapse; and now I don't have padding, how can I use both?
here is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="exe2CSS3.css">
</head>
<body>
<table>
<div>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even line">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</div>
</table>
</body>
</html>
and my css code:
table {
font-family:Tahoma; font-size:13px; border: 10px solid #d0d0ff; margin:
25px 0 0 25px; border-collapse: collapse; padding: 20px 20px 20px 20px;
}
th { text-align:left; padding: 0 10px; }
{td,th}.center { text-align:center; }
td { padding: 0 10px;}
tr.line { border-bottom: 2px solid black; }
You have errors in your HTML and your CSS. After correcting those, all that's needed is to set border-spacing: 0 instead of border-collapse: collapse. Then it seems to work well.
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
border-collapse: separate;
border-spacing:0;
padding: 20px;
}
th, td {
text-align: left;
padding: 0 10px;
}
th.center, td.center {
text-align: center;
}
tbody tr:last-child td {
border-bottom: 2px solid black;
}
<table>
<thead>
<tr>
<th>Item</th>
<th>Manufacturer</th>
<th>Size</th>
<th>Unit Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr class="even">
<td>Corn Flakes</td>
<td>Kellogg's</td>
<td>18 oz.</td>
<td class="center">2.50</td>
<td class="center">1</td>
<td class="center">2.50</td>
</tr>
<tr class="odd">
<td>Solid White Tuna</td>
<td>Starkist</td>
<td>5 oz</td>
<td class="center">2.79</td>
<td class="center">2</td>
<td class="center">5.58</td>
</tr>
<tr class="even">
<td>Cream of Mushroom Soup</td>
<td>Campbell's</td>
<td>10.75 oz</td>
<td class="center">1.00</td>
<td class="center">2</td>
<td class="center">2.00</td>
</tr>
<tr class="odd">
<td>2% Lowfat Milk</td>
<td>Safeway</td>
<td>0.5 gal</td>
<td class="center">1.99</td>
<td class="center">1</td>
<td class="center">1.99</td>
</tr>
<tr class="even">
<td>Extra-Wide Egg Noodles</td>
<td>Golden Grain</td>
<td>12 oz</td>
<td class="center">0.87</td>
<td class="center">3</td>
<td class="center">2.61</td>
</tr>
</tbody>
<tfoot>
<tr class="hide">
<th>Total</th>
<th></th>
<th></th>
<th></th>
<th class="center">9</th>
<th class="center">14.68</th>
</tr>
</table>
Note that I also took the liberty of dividing the table in a thead, a tbody and a tfoot. With such a structure, you won't need tricks like class="line" to indicate the tr that needs the line; this can now be determined automatically (it's the last tr in the tbody).
HTML tables have a different display property than divs and they behave differently.
table {
border-collapse: collapse;
}
tbody {
border-bottom: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table style="width:50%">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>total</th>
<td></td>
<td>282</td>
</tr>
</tfoot>
</table>
Also on jsfiddle: https://jsfiddle.net/c6mwh2cL/
Also check out this answer: tbody border not showing
Also, avoid putting <div> inside a table. A table should only have <thead>, <tbody> and <tfoot> elements, and those should only have <tr> elements, and those should only have <th> and <td>. The semantic has it's purpose and this is how it's meant to be rendered.
Does this help?
Using table border-spacing: 0;
tr.line td {
border-top: 2px solid black;
}
works
table {
font-family: Tahoma;
font-size: 13px;
border: 10px solid #d0d0ff;
margin: 25px 0 0 25px;
padding: 20px 20px 20px 20px;
border-spacing: 0;
}
th {
text-align: left;
padding: 0 10px;
}
td, th { }
.center {
text-align: center;
}
td {
padding: 0 10px;
}
tr.line td {
border-top: 2px solid black;
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
</thead>
<tbody>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr>
<td>AA</td>
<td>BB</td>
<td>CC</td>
<td>DD</td>
</tr>
<tr class="line">
<td></td>
<td></td>
<td>Sum C</td>
<td>Sum D</td>
</tr>
</tbody>
</table>
I have table with td rowspan and has 3 rows so how can I make those rows with no border while keeping the main one with border?
here is the table..
I want to make it look like this, I have edited this with paint just erased the lines.
here is the jsfiddle demo
here is my html code
<table id="Table">
<thead>
<tr>
<th>Track</th><th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr>
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>9 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>10 days ago</td>
</tr>
</tbody>
</table>
and css
#Table {
table-layout:fixed;
width: 400px;
text-align: left;
border-collapse:collapse;
}
#Table th {
background: #F9F9F9;
border-bottom: solid 1px black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table td {
background: #F9F9F9;
border-bottom: 1px solid black;
padding-top: 3px;
padding-bottom: 4px;
}
#Table th:nth-child(1) { width:180px; }
#Table th:nth-child(2) { width:200px; }
#Table th:nth-child(3) { width:30px; }
#Table th:nth-child(4) { width:80px; }
#Table th:nth-child(5) { width:120px; }
A better solution would be to move the border-bottom style to the <tr> (instead of <td>) and to use a custom class to specify if your <tr> needs border or not.
See you updated jsfiddle.
CSS added/modified :
/* modified */
#Table td {
/*border-bottom: 1px solid #cccccc;*/
padding-top: 3px;
padding-bottom: 4px;
}
/*added*/
#Table tr{
border-bottom: 1px solid #CCC;
}
#Table tr.no-border-row {
border-bottom: none;
}
HTML:
<table id="Table">
<thead>
<tr>
<th>Track</th>
<th>Car</th>
<th></th>
<th>Score</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr class="no-border-row">
<td rowspan="3">LIST 1</td>
<td>Name 1</td>
<td>LT</td>
<td>59,800</td>
<td>8 days ago</td>
</tr>
<tr class="no-border-row">
<td>Name 2</td>
<td>TR</td>
<td>58,000</td>
<td>10 days ago</td>
</tr>
<tr>
<td>Name 3</td>
<td>SO</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 2</td>
<td>Name 4</td>
<td>NL</td>
<td>60,000</td>
<td>8 days ago</td>
</tr>
<tr>
<td>LIST 3</td>
<td>Name 5</td>
<td>NR</td>
<td>59,000</td>
<td>6 days ago</td>
</tr>
<tr>
<td>LIST 4</td>
<td>Name 6</td>
<td>FI</td>
<td>57,000</td>
<td>1 month ago</td>
</tr>
</tbody>
</table>
Add this to your CSS:
#Table tbody tr:nth-child(1) td:not(:first-child) { border-bottom: none; }
#Table tbody tr:nth-child(2) td { border-bottom: none; }
Example: http://jsfiddle.net/uerdg8gm/1/
I have a table with a scrollable tbody. The problem is for the scroll to work I set the display for the the tbody to block, this in turn messes up the table layout
<div align="center">
<table class="sampleTable">
<thead>
<tr>
<th class="centerAlign" colspan="3">
<b>HEADER</b>
</th>
</tr>
<tr>
<th class="centerAlign">COLUMN 1</th>
<th class="centerAlign">COLUMN 2</th>
<th class="centerAlign">COLUMN 3</th>
</tr>
</thead>
<tbody class="scroll">
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
<tr>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
<td class="centerAlign">
DATA
</td>
</tr>
</tbody>
</table>
</div>
And here's the css:
table {
border-collapse: collapse;
clear: both;
}
table.sampleTable {
border: 0;
width: 60%;
height: 90%;
}
td {
font-weight: normal;
font-family: arial;
font-size: 13px;
color: #222222;
line-height: 18px;
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
}
td.centerAlign {
text-align: center;
}
th.centerAlign {
text-align: center;
}
/* Scrollable tbody. */
tbody.scroll {
overflow: scroll;
height: 100px;
width: 100%;
}
The table looks like this and does not scroll:
Now if I add 'display: block to the tbody.scroll class and to thead, it starts scrolling (as I want it to) but the layout gets messed up.
tbody.scroll {
overflow: scroll;
height: 100px;
width: 100%;
display: block;
}
thead {
display:block;
}
This is how it looks now.
Is it possible to have the tbody scroll, without disturbing the look and feel of the table otherwise ?
I found the solution. Adding width in viewports fixed it.
td.centerAlign {
text-align: center;
width: 100vw;
}
th.centerAlign {
width: 100vw;
text-align: center;
}
This is a example, this can help you : http://jsfiddle.net/a9Lave1x/4/
HTML :
<div class="fixed-table-container">
<div class="header-background">
</div>
<div class="fixed-table-container-inner">
<table cellspacing="0">
<thead>
<tr>
<th class="first">
<div class="th-inner">First</div>
</th>
<th class="second">
<div class="th-inner">Second</div>
</th>
<th class="third">
<div class="th-inner">Third</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td>First</td>
<td>First</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>
<tr>
<td>Last</td>
<td>Last</td>
<td>Last</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS :
.header-background {
background-color: #D5ECFF;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
left: 0px;
}
.fixed-table-container {
width: 50%;
height: 200px;
border: 1px solid #000;
margin: 10px auto;
background-color: #FFF;
position: relative;
padding-top: 30px;
}
.fixed-table-container-inner {
overflow-x: hidden;
overflow-y: auto;
height: 100%;
}
thead{
color:black;
}
.first .th-inner {
border-left: medium none;
padding-left: 6px;
}
.th-inner {
position: absolute;
top: 0px;
line-height: 30px;
text-align: left;
border-left: 1px solid #000;
padding-left: 5px;
margin-left: -5px;
}
What worked for me was I wrap the entire table with a div container
Set the max-height(or any height I assume) of the container
Set overflow(-x/y) to auto and it just magically worked.