I've created a basic HTML table yet I can't seem to get the top <th> element to span 100% width of it's parent <tr> element (and ultimately the <table> element).
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
table-layout: fixed!important;
}
.table-top-heading {
display: block;
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 0 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
..my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}
<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 1</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 2</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 3</td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 4</td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 5</td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 6</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
So when you run that code snippet ^ what I want to see is 'helloWorld' centered above the 'Teachers, School, Status' row. I'm not sure why it only seems to be expanding a quarter of the table width - does it have to do with the table-layout: fixed style that I've set on the <table> element?
Link to JSFiddle
Two things:
1.) You need to add colspan="3" as an attribute to that thto make it span all three columns of that table.
2.) You should not use display: block for a table element, regardless if that's td, th, tr or whatever. The display setting of the th by default is table-cell- just leave that as it is, otherwise the table won't be a "real table" in the end (i.e. the cells loose their automatic way of aligning and adjusting themselves).
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
table-layout: fixed!important;
}
.table-top-heading {
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 0 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
..my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}
<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header" colspan="3">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 1</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 2</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 3</td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 4</td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 5</td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 6</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
You can set your ".my-card-table" and ".table-top-heading" to {display:flex}, and your ".table-top-heading-header" to {width:100%; text-align: center}.
You also had an extra (.) on your (my-table-td ) class.
Here's a working solution ;)
.my-card-table {
width: 100%;
border: 1px solid #D9D7D6;
display: flex;
}
.table-top-heading {
width: 100%;
display: flex;
}
.table-top-heading-header {
width: 100%;
text-align: center;
}
.my-card-table-heading {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
padding: 10px 5px 10px 5px;
}
.my-card-table-heading-inner {
background-color: #E9E9E9!important;
font-family: "Proxima Nova Regular";
color: #000000;
font-size: 1rem;
text-align: left;
padding: 10px 30px
}
.my-card-table-row-grey {
background-color: #F2F3F3!important;
padding: 10px!important;
}
.my-card-table-row-white {
background-color: #ffffff!important;
padding: 10px!important;
}
.my-table-td {
text-align: left;
padding-left: 30px;
}
.my-card-link {
color: #0e5b8b;
}
.my-card-link:hover {
font-family: "Proxima Nova Bold";
color: #0e5b8b;
}
.my-card-link-2 {
color: #212529;
}
<table class="my-card-table">
<tr class="table-top-heading">
<th class="table-top-heading-header">HelloWorld</th>
</tr>
<tr class="my-card-table-heading">
<th class="my-card-table-heading-inner">Teachers</th>
<th class="my-card-table-heading-inner">School</th>
<th class="my-card-table-heading-inner">Status</th>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 1</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 2</td>
<td class="my-table-td">Long Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 3</td>
<td class="my-table-td">Lincolnshire</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 4</td>
<td class="my-table-td">Buffalo Grove</td>
<td class="my-table-td">Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 5</td>
<td class="my-table-td">Kenilworth</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-white">
<td class="my-table-td">Teacher 6</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
<tr class="my-card-table-row-grey">
<td class="my-table-td">Teacher 7</td>
<td class="my-table-td">Schaumburg</td>
<td class="my-table-td">Not Logged In</td>
</tr>
</table>
I was trying to set calendar in table structure but I don't know how to set caption at the top of the table.
Also I can't change the table structure. I want it to look like below:
.calendar_wrap table {
width: 100%;
}
.calendar_wrap #wp-calendar thead th {
font-weight: 500;
color: #45515a;
font-size: 20px;
line-height: 28px;
}
.calendar_wrap #wp-calendar tbody td {
font-weight: 400;
font-size: 24px;
line-height: 36px;
color: #5b666f;
}
.calendar_wrap #wp-calendar tfoot td a {
color: #3d9596;
font-weight: 500;
margin-top: 10px;
display: inline-block;
font-size: 22px;
line-height: 32px;
}
.calendar_wrap #wp-calendar tbody td a {
color: #EF9950;
}
.calender-box {
padding: 15px;
border: 1px solid #d4d9dd;
border-radius: 8px;
}
caption {
font-size: 30px;
line-height: 36px;
color: #007ab0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="calendar_wrap mt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 mt-4 calender-box">
<table id="wp-calendar">
<caption>February 2019</caption>
<thead>
<tr>
<th scope="col" title="Monday">M</th>
<th scope="col" title="Tuesday">T</th>
<th scope="col" title="Wednesday">W</th>
<th scope="col" title="Thursday">T</th>
<th scope="col" title="Friday">F</th>
<th scope="col" title="Saturday">S</th>
<th scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" id="prev">« Oct</td>
<td class="pad"> </td>
<td colspan="3" id="next" class="pad"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="4" class="pad"> </td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
</tr>
<tr>
<td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
</tr>
<tr>
<td id="today">25</td><td>26</td><td>27</td><td>28</td>
<td class="pad" colspan="3"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
Add caption-side: top - for style specificity either make the selector #wp-calendar caption or add !important to the style - see demo below:
.calendar_wrap table {
width: 100%;
}
.calendar_wrap #wp-calendar thead th {
font-weight: 500;
color: #45515a;
font-size: 20px;
line-height: 28px;
}
.calendar_wrap #wp-calendar tbody td {
font-weight: 400;
font-size: 24px;
line-height: 36px;
color: #5b666f;
}
.calendar_wrap #wp-calendar tfoot td a {
color: #3d9596;
font-weight: 500;
margin-top: 10px;
display: inline-block;
font-size: 22px;
line-height: 32px;
}
.calendar_wrap #wp-calendar tbody td a {
color: #EF9950;
}
.calender-box {
padding: 15px;
border: 1px solid #d4d9dd;
border-radius: 8px;
}
caption {
font-size: 30px;
line-height: 36px;
color: #007ab0;
}
#wp-calendar caption { /* ADDED */
caption-side: top;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section class="calendar_wrap mt-5">
<div class="container">
<div class="row justify-content-center">
<div class="col-4 mt-4 calender-box">
<table id="wp-calendar">
<caption>February 2019</caption>
<thead>
<tr>
<th scope="col" title="Monday">M</th>
<th scope="col" title="Tuesday">T</th>
<th scope="col" title="Wednesday">W</th>
<th scope="col" title="Thursday">T</th>
<th scope="col" title="Friday">F</th>
<th scope="col" title="Saturday">S</th>
<th scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3" id="prev">« Oct</td>
<td class="pad"> </td>
<td colspan="3" id="next" class="pad"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="4" class="pad"> </td><td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td>
</tr>
<tr>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td>
</tr>
<tr>
<td>18</td><td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td>
</tr>
<tr>
<td id="today">25</td><td>26</td><td>27</td><td>28</td>
<td class="pad" colspan="3"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
I've got problem with the table. On Firefox it looks great, but when I'm opening it on Chrome for first time table is in different position. Refresh repairs everything. What I did wrong?
CSS
#spec0{
background-color: #FFFFFF;
width: 566px;
border: 1px solid #ddd;
}
#spec1{
background-color: #F1F1F1;
width: 566px;
height: 20px;
}
#table {
border-collapse: collapse;
width: 566px;
border: 1px solid #ddd;
margin-top: 11px;
position: static;
}
#tr{
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
text-align: right;
}
#tr1{
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
}
#tr3{
height: 10px;
font-size: 11pt;
border: 1px solid #ddd;
text-align: left;
}
HTML
<table id="table">
<tr id="spec">
<th id="tr">Template</th>
<th id="tr3">Template</th>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec">
<td id="tr">Template</td>
<td id="tr1">Template</td>
</tr>
<tr id="spec1">
<td id="tr"></td>
<td id="tr1">Template</td>
</tr>
</table>
image; first launch from Chrome
You are using mutiple equal ID's , ID's must be unique , so change to class, and you were trying to apply #spec0 when you had only id="spec"
.spec {
background-color: #FFFFFF;
width: 566px;
border: 1px solid #ddd;
}
.spec1 {
background-color: #F1F1F1;
width: 566px;
height: 20px;
}
#table {
border-collapse: collapse;
width: 566px;
border: 1px solid #ddd;
margin-top: 11px;
position: static;
}
.tr {
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
text-align: right;
}
.tr1 {
border: 1px solid #ddd;
height: 10px;
font-size: 11pt;
}
.tr3 {
height: 10px;
font-size: 11pt;
border: 1px solid #ddd;
text-align: left;
}
<table id="table">
<tr class="spec">
<th class="tr">Template</th>
<th class="tr3">Template</th>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec">
<td class="tr">Template</td>
<td class="tr1">Template</td>
</tr>
<tr class="spec1">
<td class="tr"></td>
<td class="tr1">Template</td>
</tr>
</table>
I am working on building out a pricing table/feature matrix (picture of what I am trying to build below)
I have the base built out, but I am running into trouble with the price rollups at the bottom, specifically for the 'Entrepreneur' and 'Business Pro' columns.
I want to be able to add new rows (new features) onto this and have the bottom prices adjust (move downwards) accordingly. Right now I am using relative positioning, which isn't going to work since I would need to adjust it every time a new feature/row is added.
Codepen Link: http://codepen.io/er40/pen/NxeZpq
.box {
width: 1100px;
margin: 50px auto;
}
/* Services Col */
.services-table {
float: left;
margin-top: 114px;
z-index: 0;
margin-right: 5px;
}
.services-table tr {
height: 40px;
background: #fff;
border-bottom: 1px solid #f4f4f4;
}
.services-table tr:last-child {
border-bottom: none;
}
.services-table th.services {
color: #707478;
font-weight: 100;
min-width: 375px;
background: #fff;
}
/* Entrepreneur and Business Pro Col */
table.price-matrix {
-webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
float: left;
}
table.price-matrix tr {
height: 40px;
background: #fff;
}
/* Headers */
table.price-matrix th.header-white {
color: #707478;
font-weight: 100;
font-size: 30px;
min-width: 230px;
text-align: center;
padding: 15px 0;
background: #fff;
}
table.price-matrix th.header-white:first-child {
border-right: 1px solid #e3e3e3;
}
th.header-white hr,
th.header-green hr {
width: 70%;
border-bottom: 1px solid;
}
/* Rows */
tr:nth-child(even) td {
background: #f7fafb;
}
tr:nth-child(even) td.td-green {
background: #489a5a;
}
tr:nth-child(odd) td.td-green {
background: #54aa66;
}
td.border {
border-right: 1px solid #e3e3e3;
}
/* Enterprise */
.enterprise {
float: left;
-webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
margin-top: -20px;
}
.enterprise tr {
height: 40px;
}
th.header-green {
color: #fff;
font-weight: 100;
font-size: 30px;
min-width: 230px;
text-align: center;
padding: 35px 0 15px;
background: #54aa66;
}
.enterprise tr.price {
height: 100px;
}
.enterprise tr.price-border {
height: 10px;
}
span {
display: inline-block;
text-align: center;
width: 230px;
position: relative;
left: 380px;
bottom: 110px;
font-size: 60px;
}
<section id="pakete">
<div class="box">
<!-- The surrounding box -->
<!-- The front container -->
<div class="front">
<table class="services-table">
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
</table>
<table class="price-matrix" border="0">
<tr>
<th class="header-white">Entrepreneur
<hr />
</th>
<th class="header-white">Business Pro
<hr />
</th>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td class="entypo-cancel"></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
</table>
<table class="enterprise">
<th class="header-green">Enterprise
<hr />
</th>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr class="price">
<td class="td-green"></td>
</tr>
<tr class="price-border">
<td class="td-green"></td>
</tr>
</table>
<span>19</span>
</div>
</section>
There are many more solutions for this UI, but according to me, this is the quickest/standardised way to achieve this. This layout is also responsive as well.
Note: I have used many :not Selectors to avoid inheritance.
function priceTable() {
var whiteLeft = $('.white-left').innerWidth(),
greenWidth = $('.green-width').innerWidth(),
whiteHeight = $('.price').innerHeight();
$('.bg-white').css({
'left': whiteLeft,
'bottom': whiteHeight
});
$('.bg-green').css({
'width': greenWidth
});
};
$(document).ready(priceTable);
$(window).on('resize load', priceTable);
body {
background: #f1f1f1;
font: 13px/16px sans-serif;
}
.main {
position: relative;
}
.main .bg-white,
.main .bg-green {
position: absolute;
right: 0;
}
.main .bg-white {
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
top: 20px;
}
.main .bg-green {
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
top: 0;
bottom: 0;
}
.price-table {
width: 100%;
border-collapse: collapse;
position: relative;
z-index: 9;
}
.price-table .min {
height: 10px;
padding: 5px;
}
.price-table tr:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.price-table tr:nth-child(2n) td:not(:first-child,
:last-child,
.price) {
background: rgba(0, 0, 0, 0.02);
}
.price-table tr:nth-child(2n) td:last-child {
background: #428c52;
}
.price-table tr td {
padding: 20px;
}
.price-table tr td:not(:first-child) {
text-align: center;
}
.price-table tr td:last-child {
background: #489a5a;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main">
<span class="bg-white"></span>
<span class="bg-green"></span>
<table class="price-table">
<thead>
<tr>
<td class="min" colspan="3"></td>
<td class="min"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="white-left"> </td>
<td>Entrepreneur</td>
<td>Business Pro</td>
<td class="green-width">Enterprise</td>
</tr>
<tr>
<td>Service 1</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Service 2</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Service 3</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td>Service 4</td>
<td>yes</td>
<td>yes</td>
<td>yes</td>
</tr>
<tr>
<td> </td>
<td class="price">$19/month</td>
<td class="price">$19/month</td>
<td>$19/month</td>
</tr>
</tbody>
</table>
</div>
EDIT: Okay, this isn't exactly like the image. But I think it will be the most efficient for actually adding data. If you didn't need to add additional data(at least to my knowledge and experience), you could make it look exactly like the image above. The way box shadow works though, I was personally unable to make it function exactly.
Remove the <span> and change the span class to .price. Remove the Display: inline-block; as well. I also added .td-white, which will give the white pricing the look you are wanting(minus the drop shadow). I think this is what you're looking for:
UPDATED*Reference: http://codepen.io/anon/pen/wMZBqG
HTML:
<section id="pakete">
<div class="box">
<!-- The surrounding box -->
<!-- The front container -->
<div class="front">
<table class="services-table">
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
<tr>
<th class="services">Service 1</th>
</tr>
</table>
<table class="price-matrix" border="0">
<tr>
<th class="header-white">Entrepreneur
<hr />
</th>
<th class="header-white">Business Pro
<hr />
</th>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td class="entypo-cancel"></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr>
<td class="border"></td>
<td></td>
</tr>
<tr class="price">
<td class="td-white">20</td>
<td class="td-white">20</td>
</tr>
</table>
<table class="enterprise">
<th class="header-green">Enterprise
<hr />
</th>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr>
<td class="td-green"></td>
</tr>
<tr class="price">
<td class="td-green">20</td>
</tr>
<tr class="price-border">
<td class="td-green"></td>
</tr>
</table>
</div>
</section>
CSS:
.box {
width: 1100px;
margin: 50px auto;
}
/* Services Col */
.services-table {
float: left;
margin-top: 114px;
z-index: 0;
margin-right: 5px;
}
.services-table tr {
height: 40px;
background: #fff;
border-bottom: 1px solid #f4f4f4;
}
.services-table tr:last-child {
border-bottom: none;
}
.services-table th.services {
color: #707478;
font-weight: 100;
min-width: 375px;
background: #fff;
}
/* Entrepreneur and Business Pro Col */
table.price-matrix {
-webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .07);
float: left;
}
table.price-matrix tr {
height: 40px;
background: #fff;
}
/* Headers */
table.price-matrix th.header-white {
color: #707478;
font-weight: 100;
font-size: 30px;
min-width: 230px;
text-align: center;
padding: 15px 0;
background: #fff;
}
table.price-matrix th.header-white:first-child {
border-right: 1px solid #e3e3e3;
}
th.header-white hr,
th.header-green hr {
width: 70%;
border-bottom: 1px solid;
}
/* Rows */
tr:nth-child(even) td {
background: #f7fafb;
}
tr:nth-child(even) td.td-green {
background: #489a5a;
}
tr:nth-child(odd) td.td-green {
background: #54aa66;
}
td.border {
border-right: 1px solid #e3e3e3;
}
/* Enterprise */
.enterprise {
float: left;
-webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
box-shadow: 0 0 16px 0 rgba(0, 0, 0, .21);
margin-top: -20px;
}
.enterprise tr {
height: 40px;
}
th.header-green {
color: #fff;
font-weight: 100;
font-size: 30px;
min-width: 230px;
text-align: center;
padding: 35px 0 15px;
background: #54aa66;
}
.enterprise tr.price {
height: 100px;
}
.enterprise tr.price-border {
height: 10px;
}
.price {
text-align:center;
width:230px;
position:relative;
left:380px;
bottom:110px;
font-size:60px;
}
.td-white {
background-color: #FFFFFF !important;
border-right: 1px solid #e3e3e3;
border-top: 1px solid #e3e3e3
}
This should allow you to add new services and have the bottom pricing move dynamically with it.
I have the problem that the scroll bar appears disabled. What I want to achieve is static table header (that is why I used two tables) and a scrollable table body.
HTML:
<div id="segment-content">
<div class="table-header">
<table>
<thead>
<tr class="font-readable">
<th class="hashtag" align="center">#</th>
<th class="in">In</th>
<th class="out">Out</th>
<th class="duration">Duration</th>
<th class="filename">Filename</th>
<th class="unset">Unset</th>
<th class="preview">Preview</th>
<th class="public">Public</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table>
<tbody>
<tr class="font-readable">
<td class="hashtag">1</td>
<td class="in">10-10-2015 11:11:00</td>
<td class="out">10-10-2015 11:11:00</td>
<td class="duration">1800 seg</td>
<td class="filename">10-10-2015-11-11-00-10-10-2015-11-1200.mp4</td> <td class="unset">Unset</td>
<td class="preview">Preview</td>
<td class="public">Public</td>
</tr>
<tr class="font-readable">
<td class="hashtag">2</td>
<td class="in">10-10-2015 11:11:00</td>
<td class="out">10-10-2015 11:11:00</td>
<td class="duration">1800 seg</td>
<td class="filename">10-10-2015-11-11-00-10-10-2015-11-12-00.mp4</td>
<td class="unset">Unset</td>
<td class="preview">Preview</td>
<td class="public">Public</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS
#segment-content {
/*margin-top: 455px;*/
margin-top: 470px;
margin-left: 65px;
margin-right: 65px;
background: #1F1F1F;
}
.table-body {
overflow-y: scroll;
height: 100%;
}
table {
width: 100%;
}
.font-readable {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: center;
}
.hashtag {
width: 20px;
}
.in, .out {
width: 200px;
}
.duration {
width: 100px;
}
.filename {
width: 400px;
}
how can i fix this?