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>
Related
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 am working with HTML tables and need to achieve like attached image.
When I try to achieve this,I caught problem like this
① I couldn't figure out how not to display border line.
② Each cell size is not aligned compared to desired result.
I would like to achieve in a certain way. If you have any opinion, please let me know.
Thanks
table {
border-collapse:collapse;
table-layout: fixed;
text-align: center;
width: 10rem;
height: 10rem;}
td {
border:solid black 1px;
}
.noborder {
}
.noborder2{
}
<table>
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
You can do something like this using empty-cells: hide;.
Note: but the border is bit off since it removes the td border where the content doesn't exists. If that's ok.
.tbl {
empty-cells: hide;
border: 1px solid #999;
}
td {
background: #fff;
border: 1px solid #999;
padding: 10px 15px;
cursor: pointer;
}
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="noborder">Total (summary)</td>
<td class="noborder"></td>
<td class="noborder"></td>
<td class="noborder"></td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td class="noborder2"></td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>6</td>
</tr>
</tbody>
</table>
Here is the another version:
.MainDiv {
border: 1px solid #999;
display: inline-block;
}
table.tbl {
empty-cells: hide;
}
td.noborder {
background: #fff;
border: 1px solid #999;
width: 50px;
height: 50px;
text-align: center;
}
td.removeBorder {
width: 100px;
height: 50px;
}
td:empty {
visibility: hidden;
}
<div class="MainDiv">
<table class="tbl" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="3" class="removeBorder">Total (summary)</td>
</tr>
<tr>
<td class="noborder">A</td>
<td class="noborder">B</td>
<td class="noborder">C</td>
<td class="noborder"></td>
</tr>
<tr>
<td class="noborder">1</td>
<td class="noborder">2</td>
<td class="noborder">3</td>
<td class="noborder">6</td>
</tr>
</tbody>
</table>
</div>
I'm building this html table:
<div class="parser-table-wrapper">
<table class="parser-table">
<thead>
<tr>
<th>Category</th>
<th>Value</th>
<th>Id</th>
<th>Number</th>
</tr>
</thead>
<tbody id="tbody-filter-market-country-specialty">
<tr class="parser-row">
<th rowspan="6">1</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">2</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">c</td>
<td class="parser-value-cell table-value-cell">c1</td>
<td class="parser-value-cell table-value-cell">3</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">d</td>
<td class="parser-value-cell table-value-cell">d1</td>
<td class="parser-value-cell table-value-cell">4</td>
</tr>
<tr class="parser-row">
<td class="parser-value-cell table-value-cell">e</td>
<td class="parser-value-cell table-value-cell">e1</td>
<td class="parser-value-cell table-value-cell">5</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">f</td>
<td class="parser-value-cell table-value-cell">f1</td>
<td class="parser-value-cell table-value-cell">6</td>
</tr>
<tr class="parser-row">
<th rowspan="2">2</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">2</td>
</tr>
<tr class="parser-row">
<th rowspan="2">3</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row">
<th rowspan="2">4</th>
<td class="parser-value-cell table-value-cell">a</td>
<td class="parser-value-cell table-value-cell">a1</td>
<td class="parser-value-cell table-value-cell">1</td>
</tr>
<tr class="parser-row last-value-row">
<td class="parser-value-cell table-value-cell">b</td>
<td class="parser-value-cell table-value-cell">b1</td>
<td class="parser-value-cell table-value-cell">2</td>
</tr>
</tbody>
</table>
</div>
with the following css:
body {
font-family: "lato",Arial,sans-serif;
color: rgba(0,0,0,0.84);
font-weight: 400;
line-height: 1.4em;
}
.parser-table-wrapper {
border: 1px solid #9e9e9e;
border-radius: 2px;
margin: 18px 10% 12px 10%;
overflow-x: auto;
}
.parser-table-wrapper table {
width: 100%;
border-radius: 3px;
box-shadow: 1px 1px 1px #9e9e9e;
}
.parser-table-wrapper table th, .parser-table-wrapper table td {
border-bottom: 0px;
font-size: 15px;
line-height: 1.25;
min-width: 30px;
max-width: 120px;
text-align: left;
}
.parser-table-wrapper table th {
padding: 6px;
background-color: #dcdcdc;
}
.parser-table-wrapper table td.table-value-cell {
height: 30.4px;
padding-left: 6px;
}
.parser-table-wrapper table tbody tr th {
background-color: #fff;
border-bottom: 1px solid #cdcdcd;
}
.parser-table-wrapper table tbody tr:nth-child(even) td {
background-color: #efefef;
}
.parser-table-wrapper table tbody .last-value-row {
border-bottom: 1px solid #cdcdcd;
}
.parser-table-wrapper table tfoot {
background-color: #e2e2e2;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody {
border-top: 1px solid #ccc;
}
and I want that all rows to have the same height but it seems the first row of each category (the ones containing a th with a rowspan attribute) add an extra 0.8px, even if I set the height to a specific value. Any ideas how to solve this issue?
here is the jsfiddle: https://jsfiddle.net/89x0j6a4/
Edit: Seems like adding a border to the tr and the border-collapse style to table affects the rows height. Any idea how to add those borders without affecting the row height?
I have a table with a sticky column (see jsfiddle below). But I´m trying to have a vertical scroll just on the table body so the headers are always visible and the height of tbody should be fixed. How can I do this?
body {
font: 16px Calibri;
}
table {
border-collapse: separate;
border-top: 3px solid grey;
}
td,th {
margin: 0;
border: 3px solid grey;
border-top-width: 0px;
white-space: nowrap;
}
div {
width: 600px;
overflow-x: scroll;
margin-left: 5em;
overflow-y: visible;
padding-bottom: 1px;
}
.headcol {
position: absolute;
width: 5em;
left: 0;
top: auto;
border-right: 0px none black;
border-top-width: 3px;
/*only relevant for first row*/
margin-top: -3px;
/*compensate for top border*/
}
.long {
background: yellow;
letter-spacing: 1em;
}
<div>
<table>
<thead>
<tr>
<th class="headcol">sticky col</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="headcol">1</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">2</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">3</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">4</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">5</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">6</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">7</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">8</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
<tr>
<td class="headcol">9</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
<td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
</tr>
</tbody>
</table>
</div>
The end result should be similar to this:
http://demos.telerik.com/kendo-ui/grid/frozen-columns
You will need to set the position to fixed of the cell that you would like to remain fixed during vertical scroll.
.headcol {
position:fixed;
}
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>