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?
Related
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>
How to make the horizontal scroll bar only affects the gray columns in the following illustration.
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
#table {
background: white;
margin: 100px auto;
width: 400px;
overflow: auto;
text-align: center;
}
#inner-table {
border-collapse: collapse;
border-radius: 3px;
overflow: hidden
}
td,
th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.sticky {
background-color: #1C3D5A;
color: #dae1e7;
}
.scroll {
background-color: #B8C2CC;
color: #22292f
}
<div id="table">
<table id="inner-table">
<thead>
<tr>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="scroll">scroll</th>
<th class="sticky">sticky</th>
<th class="sticky">sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td class="sticky">1</td>
<td class="sticky">2</td>
<td class="scroll">3</td>
<td class="scroll">4</td>
<td class="scroll">5</td>
<td class="scroll">6</td>
<td class="scroll">7</td>
<td class="scroll">8</td>
<td class="sticky">9</td>
<td class="sticky">10</td>
</tr>
<tr>
<td class="sticky">11</td>
<td class="sticky">12</td>
<td class="scroll">13</td>
<td class="scroll">14</td>
<td class="scroll">15</td>
<td class="scroll">16</td>
<td class="scroll">17</td>
<td class="scroll">18</td>
<td class="sticky">19</td>
<td class="sticky">20</td>
</tr>
</tbody>
</table>
</div>
This was rather more difficult to put together than I anticipated - and even now, I am wondering if there isn't a much simpler approach.
The approach below utilises:
an outer container which contains two position: absolute tables
a fixed-width inner container - using margins for positioning inside the outer container - with a scrollbar, which allows you to see the oversized table it contains
Working Example:
html,
body {
background: #ccc;
font-family: Arial, sans-serif
}
.outer-container {
position: relative;
background-color: white;
margin: 40px auto;
width: 400px;
overflow: hidden;
text-align: center;
}
.outer-container,
.inner-container {
height: 125px;
}
table {
height: 108px;
}
.inner-container table {
border-radius: 3px;
}
td, th {
padding: 5px 10px;
}
th {
border-bottom: 1px solid #B8C2CC
}
.fixed-table th,
.fixed-table td {
background-color: #1C3D5A;
color: #dae1e7;
}
.inner-container {
margin: 0 130px;
max-width: 612px;
overflow: auto;
}
.inner-container > table {
background-color: #B8C2CC;
color: #22292f
}
.outer-container > table {
position: absolute;
top: 0;
border-collapse: collapse;
}
.outer-container > table:nth-of-type(1) {
left: 0;
}
.outer-container > table:nth-of-type(2) {
right: 0;
}
<div class="outer-container">
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
</tr>
</tbody>
</table>
<div class="inner-container">
<table>
<thead>
<tr>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
<th>scroll</th>
</tr>
</thead>
<tbody>
<tr>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
</tr>
</tbody>
</table>
</div>
<table class="fixed-table">
<thead>
<tr>
<th>sticky</th>
<th>sticky</th>
</tr>
</thead>
<tbody>
<tr>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>19</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
CSS3 should do the job.
table {
position: relative;
padding-left: (width-of-your-td-elements);
}
table td:first-of-type {
position: absolute;
left: 0;
}
Sources
I intend to do this:
Left Side Column ---> Frozen
Right Side Column ---> Scrollable
The problem that I'm facing currently is that only <td> part is getting frozen. and the <th> has no effect of the code. I couldn't figure out how to get this fixed? Any help would be much appreciated.
Thanks in advance.
HTML code:
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table" >
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long"><h3>Sheet</h3></th>
<th class="header"><h3>Part Type</h3></th>
<th class="header"><h3>Options</h3></th>
<th class="header"><h3>Customer</h3></th>
<th class="header"><h3>Code</h3></th>
<th class="header"><h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol"><h3>ABC01</h3></td>
<td class="row-content"><h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>
CSS code:
.padding-right-5 {
padding-right: px;
}
.max_width_300 {
max_width : 300px;
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
Added few fixes. Hope this will get you started.
.padding-right-5 {
padding-right: 5px;
}
.max_width_300 {
max-width : 300px;
}
.long{
position: absolute; /* added this */
}
.margin_bottom_30 {
margin-bottom:30px;
}
.innerDiv {
overflow-x : scroll;
height: 300px;
overflow-y: visible;
padding: 0;
}
.header {
border :1px solid;
min-width: 100px;
height: 75px;
background-color: #C4C4C4;
}
.row-content {
min-width: 100px;
min-height: 100px;
vertical-align: middle;
height: 50px;
border: 1px solid;
height: 57px;
}
.headcol {
position: absolute;
background: #fff; /*added this */
}
#fix_table{
border-collapse: separate;
border-spacing: 0;
}
td, th {
margin: 0;
white-space: nowrap;
border-top-width: 0px;
}
<div class="padding-right-5 max_width_300 margin_bottom_30">
<div class="innerDiv">
<table id="fix_table">
<tr>
<th class="height_26"></th>
</tr>
<tr>
<th class="header long">
<h3>Sheet</h3></th>
<th class="header">
<h3>Part Type</h3></th>
<th class="header">
<h3>Options</h3></th>
<th class="header">
<h3>Customer</h3></th>
<th class="header">
<h3>Code</h3></th>
<th class="header">
<h3>Address</h3></th>
</tr>
<tr>
<td class="row-content headcol">
<h3>ABC01</h3></td>
<td class="row-content">
<h3>QQQ</h3></td>
<td class="row-content" style="min-width:150px;">
<h3>POP with camera
With primer - cam
Alt of 'WS with camera'
Mobileye
Alt of 'QPS with camera'</h3>
</td>
<td class="row-content">
<h3>Renault</h3>
</td>
<td class="row-content">
<h3>Xcent</h3>
</td>
<td class="row-content">
<h3>Canada</h3>
</td>
<tr>
</table>
</div>
</div>
I generated following PDF report data formation by HTML using Rotativa.
But when I tested with large data, above the header report is getting cut.
So how can I handle large data in HTML without page margins not affected.
I have used pure <table><tr><td></td></tr></table> structure to design. And to prevent data to overflow, I have set all my tables with style table-layout:fixed and word-wrap: break-word.
normal report view:
altered report view:
following is my html page for the header
Does anyone help me?
<div id="header" style="font-family: Calibri; padding-top: 25px;">
<div style="float: right; font-family: Calibri; padding-right: 15px; font-size: 11px; margin-bottom: 2px;">
Page <span class="page"></span> of <span class="topage"></span>
</div>
<script type="text/javascript">
(function () {
var vars = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]);
}
var p = ['page', 'topage', 'frompage', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in p) {
var y = document.getElementsByClassName(p[i]);
for (var j = 0; j < y.length; j++)
y[j].textContent = vars[p[i]];
}
})();
</script>
<table id-="reportHedear" style="width: 100%; table-layout: fixed; border: 1px solid lightgrey; font-family: Calibri; top: 10px">
<tr style="width: 100%">
<td style="width: 1%" valign="top"></td>
<td style="width: 75%" valign="top">
<table style="width: 100%; margin: 0px; table-layout: fixed;">
<tr style="width: 100%">
<td id="logo" style="width: 25%; margin-top: 10px">
<img src="#Model.CompanyLogo" alt="" style="max-height: 50px; max-width: 220px" />
</td>
<td style="width: 3%"></td>
<td id="companyHeader" style="width: 72%" valign="top">
#if (#Model.CompanyMainTag != null && #Model.CompanyTag1 != null && #Model.CompanyISOTag != null)
{
<table style="table-layout:fixed; word-wrap:break-word; width:100%; border-top: 5px solid; border-bottom: 5px solid;">
<tr id="mainTag" style="width:100%">
<td style="width:100%; text-align: center; font-size:15px">#Model.CompanyMainTag</td>
</tr>
<tr id="tag1" style="width:100%">
<td style="width:100%; text-align: center; font-size:13px">#Model.CompanyTag1</td>
</tr>
<tr id="companyISO" style="width:100%">
<td style="width:100%; text-align: center; font-size:15px">#Model.CompanyISOTag</td>
</tr>
</table>
}
</td>
</tr>
<tr style="width:100%;">
<td colspan="3" style="width:100%; ">
<table style="width:100%; font-size: 12px; table-layout: fixed">
<tr style="width:100%">
<td id="addressInfo" style="width: 30%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%">
<td style="width: 45%; text-align: right; font-weight: bold" valign="top"><span>Address: </span></td>
<td style="width: 55%;"><label>#Model.ComapnyAddress</label></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<td style="width: 45%; text-align: right; font-weight: bold" valign="top"><span>Phone: </span></td>
<td style="width: 55%"><span>#Model.ComapnyPhone</span></td>
</tr>
#if (Model.IsEnableProgramManager)
{
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<td style="width: 45%; text-align:right; font-weight: bold" valign="top"><span>Program Manager: </span></td>
<td style="width: 55%"><span>#Model.ProgramManager</span></td>
</tr>
}
</table>
</td>
<td id="companyDetail" style="width: 35%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%">
<th style="width: 30%; text-align: right;" valign="top"><span>#Model.CustomerLabel: </span></th>
<td style="width: 70%; font-weight: bold"><span>#Model.CompanyName</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Address: </span></th>
<td style="width: 70%;"><label>#Model.Address</label></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Web: </span></th>
<td style="width: 70%"><span>#Model.Website</span></td>
</tr>
</table>
</td>
<td id="comapnyDetails1" style="width: 35%" valign="top">
<table style="width: 100%; table-layout: fixed; word-wrap: break-word">
<tr style="width: 100%;">
<th style="width: 30%; text-align: right;" valign="top"><span>Attn: </span></th>
<td style="width: 70%; "><span>#Model.ContactPersonName</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Email: </span></th>
<td style="width: 70%;"><span>#Model.EmailID</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Phone: </span></th>
<td style="width: 70%"><span>#Model.ContactNo</span></td>
</tr>
<tr><td colspan="2"></td></tr>
<tr style="width: 100%">
<th style="width: 30%; text-align: right" valign="top"><span>Fax: </span></th>
<td style="width: 70%"><span>#Model.Fax</span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="width: 2%" valign="top"></td>
<td style="width: 21%" valign="top">
<table style="width: 100%; table-layout: fixed" align="center">
<tr style="width: 100%">
<td style="width: 100%" align="center">
<span style="margin-bottom: 1px; font-weight: bold; font-size: 24px">#Model.AssemblyQuotationHeader</span>
<table id="QuoteDetails" style="max-width: 100%; table-layout: fixed; margin-top: 1px; margin-left: 10px; font-weight: bold; text-align: center; border: black; border: 1px solid black; border-collapse:collapse">
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">RFQ ID</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.QuoteID</td>
</tr>
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Assembly Id</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.AssemblyIDWithVersion</td>
</tr>
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Date</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.QuoteDate</td>
</tr>
#if (Model.IsEnableQuoteExpirationDate)
{
<tr style="width: 100%">
<td style="max-width: 45%; font-size: 15px; padding-left: 7px; padding-right: 7px; padding-top:3px; padding-bottom: 3px; background-color: lightgray; border:1px solid black; border-collapse:collapse">Expires</td>
<td style="max-width: 55%; font-size: 15px; padding-left: 10px; padding-right: 10px; padding-top:3px; padding-bottom: 3px; border:1px solid black; border-collapse:collapse">#Model.ExpireDate</td>
</tr>
}
</table>
</td>
</tr>
<tr style="width: 100%">
<td style="width: 100%; font-size: 11px; text-align: center;">
<p>#Model.AssemblyQuotationMsg</p>
</td>
<td style="width: 1%"></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
How can I center two tables side by side?
I am centering the single table, But I could not center two tables,There is a simple way but i could not, How can i do with css?
My codes are as follows:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
background-color: #FFFFFF;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
}
/*** Table Styles **/
.table-fill {
background: white;
border-radius: 3px;
border-collapse: collapse;
height: 120px;
max-width: 400px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
}
<table class="table-fill" style="" border="1">
<thead>
<tr>
<th class="text-left">1</th>
<th class="text-left">2</th>
<th class="text-left">3</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-right">Val1</td>
<td class="text-center">a</td>
<td class="text-left">%</td>
</tr>
</tbody>
</table>
<table class="table-fill" style="" border="1">
<thead>
<tr>
<th class="text-left">1</th>
<th class="text-left">2</th>
<th class="text-left">3</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-center">AÇILAN SANDIK</td>
<td class="text-left">1</td>
<td class="text-left">1</td>
</tr>
<tr>
<td class="text-center">KALAN SANDIK</td>
<td class="text-left">1</td>
<td class="text-left">1</td>
</tr>
</tbody>
</table>
By adding 'display:inline-table;' css to your .table-fill css class, may solve your problem
#import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
background-color: #FFFFFF;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
}
/*** Table Styles **/
.table-fill {
background: white;
border-radius: 3px;
border-collapse: collapse;
height: 120px;
max-width: 400px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
display:inline-table;
}
<table class="table-fill" style="" border="1">
<thead>
<tr>
<th class="text-left">1</th>
<th class="text-left">2</th>
<th class="text-left">3</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-right">Val1</td>
<td class="text-center">a</td>
<td class="text-left">%</td>
</tr>
</tbody>
</table>
<table class="table-fill" style="" border="1">
<thead>
<tr>
<th class="text-left">1</th>
<th class="text-left">2</th>
<th class="text-left">3</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-center">AÇILAN SANDIK</td>
<td class="text-left">1</td>
<td class="text-left">1</td>
</tr>
<tr>
<td class="text-center">KALAN SANDIK</td>
<td class="text-left">1</td>
<td class="text-left">1</td>
</tr>
</tbody>
</table>
added text-align:center; to body or a parent of the tables and display:inline-table; to the .table-fill check it on full page view.
#import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
body {
background-color: #FFFFFF;
font-family: "Roboto", helvetica, arial, sans-serif;
font-size: 16px;
font-weight: 400;
text-rendering: optimizeLegibility;
text-align:center;
}
/*** Table Styles **/
.table-fill {
background: white;
border-radius: 3px;
border-collapse: collapse;
height: 120px;
max-width: 400px;
padding: 5px;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
animation: float 5s infinite;
display: inline-table;
}
<table class="table-fill" style="" border="1">
<thead>
<tr>
<th class="text-left">1</th>
<th class="text-left">2</th>
<th class="text-left">3</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-right">Val1</td>
<td class="text-center">a</td>
<td class="text-left">%</td>
</tr>
</tbody>
</table>
<table class="table-fill" style="" border="1">
<thead>
<tr>
<th class="text-left">1</th>
<th class="text-left">2</th>
<th class="text-left">3</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td class="text-center">AÇILAN SANDIK</td>
<td class="text-left">1</td>
<td class="text-left">1</td>
</tr>
<tr>
<td class="text-center">KALAN SANDIK</td>
<td class="text-left">1</td>
<td class="text-left">1</td>
</tr>
</tbody>
</table>