I am trying to present a huge dataset through flask. Unfortunately, the page numbers under the table do not fall in same line, rather each page number is being displayed as unordered list. Please refer to the below screenshot for the issue.
The html of the page looks like this:
{% extends "layout.html" %}
{% block content %}
<div>
<table class='tableView'>
<thead>
<tr>
<th>{{ columnNames[0] }}</th>
<th>{{ columnNames[1] }}</th>
<th>{{ columnNames[2] }}</th>
<th>{{ columnNames[3] }}</th>
<th>{{ columnNames[4] }}</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='5'>
<div class='links'>
{{ pagination.links }}
</div>
</td>
</tr>
</tfoot>
<tbody>
{% for record in records.values %}
<tr>
{% for index in range(5) %}
<td>{{ record[index] }}</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<div>
{% endblock %}
And the CSS looks like this:
div {
text-align: center;
}
table.tableView {
border: 1px solid #1C6EA4;
background-color: #AEDBEE;
width: 80%;
text-align: center;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
table.tableView td, table.tableView th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.tableView tbody td {
font-size: 13px;
}
table.tableView tr:nth-child(even) {
background: #D0E4F5;
}
table.tableView thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.tableView thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.tableView thead th:first-child {
border-left: none;
}
table.tableView tfoot {
font-size: 14px;
font-weight: bold;
color: #43443B;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #313644;
}
table.tableView tfoot td {
font-size: 14px;
}
table.tableView tfoot .links {
text-align: center;
}
table.tableView tfoot .links a{
display: inline-block;
background: #246688
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
How can I show the page numbers, so that they are on the same line just below the table?
Edit 1: The generated html structure is as follows:
<html>
<head>
<title>FetchDataAPI</title>
<link rel='stylesheet' href="/static/css/main.css">
</head>
<body>
<div>
<table class='tableView'>
<thead>
<tr>
<th>BATCH_ID</th>
<th>CHAR_ID</th>
<th>BATCH_TIME</th>
<th>CHAR_NAME</th>
<th>CHAR_VALUE</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='5'>
<div class='records'>
<ul class="pagination"><li class="previous disabled unavailable"><a> « </a></li><li class="active"><a>1</a></li><li>2</li><li>3</li><li>4</li><li>5</li><li class="disabled"><a>...</a></li><li>51</li><li>52</li><li class="next">»</li></ul>
</div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>86709.0</td>
<td>7786.0</td>
<td>01-JAN-14 08:43:19.0</td>
<td>START</td>
<td>LR 8986</td>
</tr>
</tbody>
</table>
<div>
</body>
</html>
table.tableView {
border: 1px solid #1C6EA4;
background-color: #AEDBEE;
width: 80%;
text-align: center;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
}
table.tableView td, table.tableView th {
border: 1px solid #AAAAAA;
padding: 3px 2px;
}
table.tableView tbody td {
font-size: 13px;
}
table.tableView tr:nth-child(even) {
background: #D0E4F5;
}
table.tableView thead {
background: #1C6EA4;
background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
border-bottom: 2px solid #444444;
}
table.tableView thead th {
font-size: 15px;
font-weight: bold;
color: #FFFFFF;
border-left: 2px solid #D0E4F5;
}
table.tableView thead th:first-child {
border-left: none;
}
table.tableView tfoot {
font-size: 14px;
font-weight: bold;
color: #43443B;
background: #D0E4F5;
background: -moz-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: -webkit-linear-gradient(top, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
background: linear-gradient(to bottom, #dcebf7 0%, #d4e6f6 66%, #D0E4F5 100%);
border-top: 2px solid #313644;
}
table.tableView tfoot td {
font-size: 14px;
}
table.tableView tfoot .records {
text-align: center;
}
table.tableView tfoot .records ul{
margin:0;
}
table.tableView tfoot .records li{
display:inline-block;
}
table.tableView tfoot .records a{
display: inline-block;
background: #246688;
color: #FFFFFF;
padding: 2px 8px;
border-radius: 5px;
}
<div>
<table class='tableView'>
<thead>
<tr>
<th>BATCH_ID</th>
<th>CHAR_ID</th>
<th>BATCH_TIME</th>
<th>CHAR_NAME</th>
<th>CHAR_VALUE</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='5'>
<div class='records'>
<ul class="pagination"><li class="previous disabled unavailable"><a> « </a></li><li class="active"><a>1</a></li><li>2</li><li>3</li><li>4</li><li>5</li><li class="disabled"><a>...</a></li><li>51</li><li>52</li><li class="next">»</li></ul>
</div>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>86709.0</td>
<td>7786.0</td>
<td>01-JAN-14 08:43:19.0</td>
<td>START</td>
<td>LR 8986</td>
</tr>
</tbody>
</table>
<div>
Here is the working example as per your html, hope it helps. Let me know if any help needed
Have you tried using Bootstrap pagination classes - https://getbootstrap.com/docs/4.1/components/pagination/ ?
From the image it seems you've list items in your pagination links and you can write a style for it.
so basically you've something like this
<ul>
<li>1<li>
<li>2<li>
<li>3<li>
</ul>
style would be
ul li {
display: inline-block;
}
You can align elements in the same line with more than one way, what i like to do is to use css flex properties to manage space between items.
so here is my solutions using css flex properties:
.records {
display: flex;
justify-content: center;
}
.records a {
margin: 14px;
background-color: red;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
cursor: pointer;
}
<div class="records">
<a>1</a>
<a>2</a>
<a>3</a>
<a>4</a>
</div>
Related
When use gradient fill for table cell, I expect rendering issues with cell borders on window resize and it's not observable when solid color fill is used.
Here is one table, some cells use gradient fill, others - solid color:
This dark gap is visible only on particular window sizes, not always.
Is it known issue?
Is there any hack for this?
Update:
Here is an example: https://codepen.io/zur4ik/pen/bmjLVp
Try change view and resize in horizontal axes
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #140B0A;
font-family: sans-serif;
}
.com-container {
width: 1540px;
margin: 0 auto;
}
.fx {
display: flex;
}
.fx.vc {
align-items: center;
}
.com-game-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.com-game-table thead tr th {
background-color: #784B3E;
height: 60px;
font-weight: 300;
position: relative;
cursor: pointer;
}
.com-game-table thead tr th:hover {
background-color: #71473b;
}
.com-game-table thead tr th:first-child {
border-top-left-radius: 5px;
overflow: hidden;
}
.com-game-table thead tr th:last-child {
border-top-right-radius: 5px;
overflow: hidden;
}
.com-game-table tbody tr td {
height: 60px;
color: #000000;
background: #FBFBFB;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
cursor: pointer;
border-collapse: collapse;
border: 0 transparent;
}
.com-game-table tbody tr td:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td .status-cell {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20px;
}
.com-game-table tbody tr td .status-cell .icon {
background-image: url("../img/tb-row-play-btn-icon.png");
background-repeat: no-repeat;
background-position: left 10px top 50%;
display: inline-block;
width: 27px;
height: 27px;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
position: relative;
top: 1px;
margin-left: 10px;
}
.com-game-table tbody tr td.col-highlight {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 100%);
}
.com-game-table tbody tr.started td {
background: #30211F;
background: -moz-linear-gradient(top, #30211F 0%, #241715 100%);
background: -webkit-linear-gradient(top, #30211F 0%, #241715 100%);
background: linear-gradient(to bottom, #30211F 0%, #241715 100%);
color: #989291;
}
.com-game-table tbody tr.started td .com-icon {
opacity: .5;
}
.com-game-table tbody tr.started td .com-icon:hover {
opacity: 1;
}
.com-game-table tbody tr.started td .status-cell .icon {
background-image: url("../img/tb-row-view-btn-icon.png");
background-position: left 6px top 50%;
opacity: .7;
}
.com-game-table tbody tr.started td.col-highlight {
background: #2a1d1b;
background: -moz-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: -webkit-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: linear-gradient(to bottom, #2a1d1b 0%, #1e1311 100%);
}
.com-game-table tbody tr:hover td {
background: white;
background: -moz-linear-gradient(top, white 0%, #fcfcfc 100%);
background: -webkit-linear-gradient(top, white 0%, #fcfcfc 100%);
background: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
}
.com-game-table tbody tr:hover.started td {
background: #332321;
background: -moz-linear-gradient(top, #332321 0%, #271917 100%);
background: -webkit-linear-gradient(top, #332321 0%, #271917 100%);
background: linear-gradient(to bottom, #332321 0%, #271917 100%);
}
.com-game-table tbody tr:hover.started td .status-cell .icon {
opacity: .8;
}
.com-game-table [data-type="tb-col-1"] {
width: 100px;
text-align: center;
}
.com-game-table [data-type="tb-col-2"] {
text-align: left;
padding-left: 15px;
}
.com-game-table [data-type="tb-col-3"] {
width: 110px;
text-align: center;
}
.com-game-table [data-type="tb-col-4"] {
width: 130px;
text-align: center;
}
.com-game-table [data-type="tb-col-5"] {
width: 160px;
text-align: center;
}
.com-game-table [data-type="tb-col-6"] {
width: 120px;
text-align: center;
}
.com-game-table [data-type="tb-col-7"] {
width: 80px;
text-align: center;
}
.com-game-table [data-type="tb-col-8"] {
width: 180px;
text-align: right;
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
min-height: 0;
width: 100%;
}
main .content {
display: flex;
flex-grow: 1;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
min-height: 0;
}
main .content .content-body {
flex-grow: 1;
padding-right: 15px;
display: flex;
}
main .content .content-body .table-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
main .content .content-body .table-wrapper .table-header {
height: 60px;
position: absolute;
z-index: 2;
}
main .content .content-body .table-wrapper .table-header:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #140B0A;
top: 0;
right: 25px;
z-index: 1;
}
main .content .content-body .table-wrapper .table-header .com-game-table {
position: relative;
z-index: 2;
}
main .content .content-body .table-wrapper .table-body {
overflow-y: hidden;
overflow-x: hidden;
flex: 1 1 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
main .content .content-body .table-wrapper .table-body .table-body-inner {
padding-top: 60px;
}
main .content .content-body .table-wrapper .table-body .com-game-table {
border-spacing: 0;
}
main .content .content-body .table-wrapper .table-body .com-game-table tbody tr td .com-icon.tooltip {
cursor: help;
}
<main>
<section class="content">
<div class="com-container fx">
<div class="content-body">
<div class="table-wrapper">
<div class="table-header">
<table class="com-game-table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th data-type="tb-col-1">A</th>
<th data-type="tb-col-2">B</th>
<th data-type="tb-col-3">C</th>
<th data-type="tb-col-4">D</th>
<th data-type="tb-col-5">E</th>
<th data-type="tb-col-6">F</th>
<th data-type="tb-col-7">G</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<div class="table-body-inner">
<table class="com-game-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
Ok from what I can work out, this is a sub-pixel rounding problem in Chrome and Edge.
A linear gradient behaves like a background image and is tessellated across the background.
I am not clear on the precise behaviour of the rendering engine but when certain widths are not divisible a 1px gap is introduced.
Firefox doesn't appear to suffer this issue because I suspect it rounds up.
WORKAROUND
We cannot get rid of the gap created in Chrome but we can hide the fact from the end user.
Apply the gradient to the row instead of the cell. The cell needs to remain transparent.
Apply no-repeat so the background gradient doesn't try to tile incorrectly.
CSS
.com-game-table tbody tr {
background: #EFEFEF;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
background-repeat: no-repeat;
}
EXAMPLE
In the example below I have applied the following fix to ONLY the white rows.
It will need appling to rows of alternate colors and also to hover effects.
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: #140B0A;
font-family: sans-serif;
}
.com-container {
width: 1540px;
margin: 0 auto;
}
.fx {
display: flex;
}
.fx.vc {
align-items: center;
}
.com-game-table {
table-layout: fixed;
width: 100%;
border-collapse: collapse;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.com-game-table thead tr th {
background-color: #784B3E;
height: 60px;
font-weight: 300;
position: relative;
cursor: pointer;
}
.com-game-table thead tr th:hover {
background-color: #71473b;
}
.com-game-table thead tr th:first-child {
border-top-left-radius: 5px;
overflow: hidden;
}
.com-game-table thead tr th:last-child {
border-top-right-radius: 5px;
overflow: hidden;
}
.com-game-table tbody tr {
background: #EFEFEF;
background: -moz-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: -webkit-linear-gradient(top, #FBFBFB 0%, #EFEFEF 100%);
background: linear-gradient(to bottom, #FBFBFB 0%, #EFEFEF 100%);
background-repeat: no-repeat;
}
.com-game-table tbody tr td {
height: 60px;
color: #000000;
cursor: pointer;
border-collapse: collapse;
border: 0 transparent;
}
.com-game-table tbody tr td:first-child {
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td:last-child {
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.com-game-table tbody tr td .status-cell {
display: flex;
justify-content: flex-end;
align-items: center;
margin-right: 20px;
}
.com-game-table tbody tr td .status-cell .icon {
background-image: url("../img/tb-row-play-btn-icon.png");
background-repeat: no-repeat;
background-position: left 10px top 50%;
display: inline-block;
width: 27px;
height: 27px;
background-color: #ffffff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.3);
position: relative;
top: 1px;
margin-left: 10px;
}
.com-game-table tbody tr td.col-highlight {
background: #eeeeee;
background: -moz-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: -webkit-linear-gradient(top, #eeeeee 0%, #e2e2e2 100%);
background: linear-gradient(to bottom, #eeeeee 0%, #e2e2e2 100%);
}
.com-game-table tbody tr.started td {
background: #30211F;
background: -moz-linear-gradient(top, #30211F 0%, #241715 100%);
background: -webkit-linear-gradient(top, #30211F 0%, #241715 100%);
background: linear-gradient(to bottom, #30211F 0%, #241715 100%);
color: #989291;
}
.com-game-table tbody tr.started td .com-icon {
opacity: .5;
}
.com-game-table tbody tr.started td .com-icon:hover {
opacity: 1;
}
.com-game-table tbody tr.started td .status-cell .icon {
background-image: url("../img/tb-row-view-btn-icon.png");
background-position: left 6px top 50%;
opacity: .7;
}
.com-game-table tbody tr.started td.col-highlight {
background: #2a1d1b;
background: -moz-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: -webkit-linear-gradient(top, #2a1d1b 0%, #1e1311 100%);
background: linear-gradient(to bottom, #2a1d1b 0%, #1e1311 100%);
}
.com-game-table tbody tr:hover td {
background: white;
background: -moz-linear-gradient(top, white 0%, #fcfcfc 100%);
background: -webkit-linear-gradient(top, white 0%, #fcfcfc 100%);
background: linear-gradient(to bottom, white 0%, #fcfcfc 100%);
}
.com-game-table tbody tr:hover.started td {
background: #332321;
background: -moz-linear-gradient(top, #332321 0%, #271917 100%);
background: -webkit-linear-gradient(top, #332321 0%, #271917 100%);
background: linear-gradient(to bottom, #332321 0%, #271917 100%);
}
.com-game-table tbody tr:hover.started td .status-cell .icon {
opacity: .8;
}
.com-game-table [data-type="tb-col-1"] {
width: 100px;
text-align: center;
}
.com-game-table [data-type="tb-col-2"] {
text-align: left;
padding-left: 15px;
}
.com-game-table [data-type="tb-col-3"] {
width: 110px;
text-align: center;
}
.com-game-table [data-type="tb-col-4"] {
width: 130px;
text-align: center;
}
.com-game-table [data-type="tb-col-5"] {
width: 160px;
text-align: center;
}
.com-game-table [data-type="tb-col-6"] {
width: 120px;
text-align: center;
}
.com-game-table [data-type="tb-col-7"] {
width: 80px;
text-align: center;
}
.com-game-table [data-type="tb-col-8"] {
width: 180px;
text-align: right;
}
main {
flex-grow: 1;
display: flex;
flex-flow: column;
min-height: 0;
width: 100%;
}
main .content {
display: flex;
flex-grow: 1;
align-items: stretch;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding-bottom: 15px;
min-height: 0;
}
main .content .content-body {
flex-grow: 1;
padding-right: 15px;
display: flex;
}
main .content .content-body .table-wrapper {
display: flex;
flex-direction: column;
position: relative;
}
main .content .content-body .table-wrapper .table-header {
height: 60px;
position: absolute;
z-index: 2;
}
main .content .content-body .table-wrapper .table-header:after {
content: '';
display: block;
position: absolute;
width: 5px;
height: 5px;
background: #140B0A;
top: 0;
right: 25px;
z-index: 1;
}
main .content .content-body .table-wrapper .table-header .com-game-table {
position: relative;
z-index: 2;
}
main .content .content-body .table-wrapper .table-body {
overflow-y: hidden;
overflow-x: hidden;
flex: 1 1 auto;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
main .content .content-body .table-wrapper .table-body .table-body-inner {
padding-top: 60px;
}
main .content .content-body .table-wrapper .table-body .com-game-table {
border-spacing: 0;
}
main .content .content-body .table-wrapper .table-body .com-game-table tbody tr td .com-icon.tooltip {
cursor: help;
}
<main>
<section class="content">
<div class="com-container fx">
<div class="content-body">
<div class="table-wrapper">
<div class="table-header">
<table class="com-game-table" cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th data-type="tb-col-1">A</th>
<th data-type="tb-col-2">B</th>
<th data-type="tb-col-3">C</th>
<th data-type="tb-col-4">D</th>
<th data-type="tb-col-5">E</th>
<th data-type="tb-col-6">F</th>
<th data-type="tb-col-7">G</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<div class="table-body-inner">
<table class="com-game-table" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="free">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">2</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
<tr class="started">
<td data-type="tb-col-1">1</td>
<td data-type="tb-col-2">3</td>
<td data-type="tb-col-3">3</td>
<td data-type="tb-col-4">4</td>
<td data-type="tb-col-5">5</td>
<td data-type="tb-col-6">6</td>
<td data-type="tb-col-7">7</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
In ArcGIS Online (browser map), I have been pasting HTML and CSS code into several different plotted points. The goal is to have a styled table pop up in the dialog box/small window when the point is clicked on. At first, the table looks and functions properly, however; after saving the layer, removing it, then reloading it, all you see is the raw CSS code and a table with zero styling.
After reviewing the ArcGIS supported HTML help page, I noticed that the online browser version does not support the "style" tag (external, internal, and inline), and it gets filtered out of the code. This is what caused my table to show raw code after reloading it.
The options they list are "div" and "span," but I cannot seem to get these to work properly. Is there a way to make this work the way that I intend it to?
ArcGIS Online Supported HTML Page
Actual full code below:
<style type="text/css"> (this style tag doesn't work and is automatically filtered out)
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 1280px;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 12px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#4D1A75');
background-color: #006699;
color: #ffffff;
font-size: 17px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table thead th:nth-child(1) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643D6), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #9643D6 5%, #4D1A75 100%);
background-color: #9643D6;
}
.datagrid table thead th:nth-child(2) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D05649), color-stop(1, #7A281F));
background: -moz-linear-gradient( center top, #D05649 5%, #7A281F 100%);
background-color: #D05649;
}
.datagrid table thead th:nth-child(3) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159D82), color-stop(1, #094338));
background: -moz-linear-gradient( center top, #159D82 5%, #094338 100%);
background-color: #159D82;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #4D1A75;
font-size: 12px;
border-bottom: 1px solid #4D1A75;
font-weight: normal;
}
.datagrid table tbody .alt td {
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody td:nth-child(1) {
background: #F4E3FF;
}
.datagrid table tbody .alt td:nth-child(1) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(2) {
background: #F9D9D6;
}
.datagrid table tbody .alt td:nth-child(2) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(3) {
background: #A5F3E3;
}
.datagrid table tbody .alt td:nth-child(3) {
background: #FFFFFF;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #652299;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #FFFFFF));
background: -moz-linear-gradient( center top, #737373 5%, #FFFFFF 10%);
background-color: #737373;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 4px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #652299;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#652299', endColorstr='#4D1A75');
background-color: #652299;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #652299;
color: #FFFFFF;
background: none;
background-color: #0682B8;
</style> (this style tag doesn't work and is automatically filtered out)
<div class="datagrid">
<table style="text-align:center">
<thead>
<tr>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
it help full
<style type="text/css">
.datagrid table {
border-collapse: collapse;
text-align: left;
width: 1280px;
}
.datagrid {
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 1px solid #006699;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
padding: 12px 10px;
}
.datagrid table thead th {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #006699), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#4D1A75');
background-color: #006699;
color: #ffffff;
font-size: 17px;
font-weight: bold;
border-left: 1px solid #0070A8;
}
.datagrid table thead th:first-child {
border: none;
}
.datagrid table thead th:nth-child(1) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9643D6), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #9643D6 5%, #4D1A75 100%);
background-color: #9643D6;
}
.datagrid table thead th:nth-child(2) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D05649), color-stop(1, #7A281F));
background: -moz-linear-gradient( center top, #D05649 5%, #7A281F 100%);
background-color: #D05649;
}
.datagrid table thead th:nth-child(3) {
border: none;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #159D82), color-stop(1, #094338));
background: -moz-linear-gradient( center top, #159D82 5%, #094338 100%);
background-color: #159D82;
}
.datagrid table tbody td {
color: #00496B;
border-left: 1px solid #4D1A75;
font-size: 12px;
border-bottom: 1px solid #4D1A75;
font-weight: normal;
}
.datagrid table tbody .alt td {
color: #00496B;
}
.datagrid table tbody td:first-child {
border-left: none;
}
.datagrid table tbody td:nth-child(1) {
background: #F4E3FF;
}
.datagrid table tbody .alt td:nth-child(1) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(2) {
background: #F9D9D6;
}
.datagrid table tbody .alt td:nth-child(2) {
background: #FFFFFF;
}
.datagrid table tbody td:nth-child(3) {
background: #A5F3E3;
}
.datagrid table tbody .alt td:nth-child(3) {
background: #FFFFFF;
}
.datagrid table tbody tr:last-child td {
border-bottom: none;
}
.datagrid table tfoot td div {
border-top: 1px solid #652299;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #939393), color-stop(1, #FFFFFF));
background: -moz-linear-gradient( center top, #737373 5%, #FFFFFF 10%);
background-color: #737373;
}
.datagrid table tfoot td {
padding: 0;
font-size: 12px
}
.datagrid table tfoot td div {
padding: 2px;
}
.datagrid table tfoot td ul {
margin: 0;
padding: 0;
list-style: none;
text-align: right;
}
.datagrid table tfoot li {
display: inline;
}
.datagrid table tfoot li a {
text-decoration: none;
display: inline-block;
padding: 4px 8px;
margin: 1px;
color: #FFFFFF;
border: 1px solid #652299;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #652299), color-stop(1, #4D1A75));
background: -moz-linear-gradient( center top, #006699 5%, #4D1A75 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#652299', endColorstr='#4D1A75');
background-color: #652299;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
text-decoration: none;
border-color: #652299;
color: #FFFFFF;
background: none;
background-color: #0682B8;
</style> (this style tag doesn't work and is automatically filtered out)
<div class="datagrid">
<table style="text-align:center">
<thead>
<tr>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
<th style="text-align:center">header</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<div id="paging">
<ul>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
<li><span>Temporary Blank</span>
</li>
</ul>
</div>
</tr>
</tfoot>
<tbody>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="alt">
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
</div>
Can somebody help me to adjust the scrollbar inside the table with a fixed header?
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:#ccc 1px solid;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow: 0 1px 2px #d1d1d1;
-webkit-box-shadow: 0 1px 2px #d1d1d1;
box-shadow: 0 1px 2px #d1d1d1;
}
table th {
padding:21px 25px 22px 25px;
border-top:1px solid #fafafa;
border-bottom:1px solid #e0e0e0;
background: #ededed;
background: -webkit-gradient(linear, left top, left bottom, from(#ededed), to(#ebebeb));
background: -moz-linear-gradient(top, #ededed, #ebebeb);
}
table th:first-child {
text-align: left;
padding-left:20px;
}
table tr:first-child th:first-child {
-moz-border-radius-topleft:3px;
-webkit-border-top-left-radius:3px;
border-top-left-radius:3px;
}
table tr:first-child th:last-child {
-moz-border-radius-topright:3px;
-webkit-border-top-right-radius:3px;
border-top-right-radius:3px;
}
table tr {
text-align: center;
padding-left:20px;
}
table td:first-child {
text-align: left;
padding-left:20px;
border-left: 0;
}
table td {
padding:18px;
border-top: 1px solid #ffffff;
border-bottom:1px solid #e0e0e0;
border-left: 1px solid #e0e0e0;
background: #fafafa;
background: -webkit-gradient(linear, left top, left bottom, from(#fbfbfb), to(#fafafa));
background: -moz-linear-gradient(top, #fbfbfb, #fafafa);
}
table tr.even td {
background: #f6f6f6;
background: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), to(#f6f6f6));
background: -moz-linear-gradient(top, #f8f8f8, #f6f6f6);
}
table tr:last-child td {
border-bottom:0;
}
table tr:last-child td:first-child {
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
}
table tr:last-child td:last-child {
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
}
table tr:hover td {
background: #f2f2f2;
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f0f0f0));
background: -moz-linear-gradient(top, #f2f2f2, #f0f0f0);
}
<div class="tablecontainer">
<div class="table" >
<table cellspacing='0'>
<thead>
<tr>
<th>Tutor Name </th>
<th>Tutor NRIC</th>
<th>Tutor Email</th>
<th>Tutor qualification</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jane</td>
<td>1234567</td>
<td>Jane#gmail.com</td>
<td>Diploma</td>
</tr>
<tr>
<td>John</td>
<td>1234567</td>
<td>jphn#gmail.com</td>
<td>Diploma</td>
</tr>
</tbody>
</table>
</div>
</div>
Your tbody must have a height and an overflow rule to activate the scrollbar. Meanwhile your thead must be positioned
.wrap-scroll thead {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.wrap-scroll {
height: 106px;
overflow-y: auto;
}
See my DEMO for it
UPDATE : NOW IT WORKS IN CHROME AND NOT IN FIREFOX
I cant get a border radius and and a gradient on the header of the table at the same time.
//normal table
<table cellspacing="0">
<thead>
<tr class ="header">
<th>one</th><th>two</th><th>three</th><th>four</th>
</tr>
</thead>
<tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
<tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
<tr><td>onetd</td><td>twotd</td><td>threetd</td><td>fourtd</td></tr>
</table>
css that is not working. the gradient was taken from some gradient generator
tr:nth-child(even){
background-color: yellow;
}
tr:nth-child(odd){
background-color: green;
}
table thead tr.header{
border-top-left-radius: 30px;
border:1px solid black;
background-image: linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
background-image: -o-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
background-image: -moz-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
background-image: -webkit-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
background-image: -ms-linear-gradient(bottom, rgb(52,156,235) 19%, rgb(61,224,216) 60%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.19, rgb(52,156,235)),
color-stop(0.6, rgb(61,224,216))
);
}
table thead tr.header > th:nth-child(1){
border-top-left-radius:10px;
}
I would definitely like it to work in major browsers
not working jsfiddle
css:
.border{
border: 2px solid #666666;
border-radius: 5px 5px 0px 0px;
-moz-border-radius: 5px 5px 0px 0px;
-webkit-border-radius: 5px 5px 0px 0px;
}
table {
margin: 50px;
border-spacing: 0;
width: 450px;
}
.border th:first-child {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
.border th:last-child {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
.border td:first-child, .border th:first-child {
border-left: medium none;
}
.border th {
background-color: #666666;
background-image: -moz-linear-gradient(center top , #3DE0D8, #349CEB);
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#3DE0D8), to(#349CEB), color-stop(.4, #3DE0D8));
}
.border td, .border th {
border-left: 2px solid #666666;
border-top: 2px solid #666666;
padding: 10px;
text-align: center;
}
tr:nth-child(even){
background-color: yellow;
}
tr:nth-child(odd){
background-color: green;
}
html:
<table class="border">
<thead>
<tr>
<th><label>one</label></th>
<th><label>two</label></th>
<th><label>Three</label></th>
<th><label>Four</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><label>one</label></td>
<td><label>two</label></td>
<td><label>Three</label></td>
<td><label>Four</label></td>
</tr>
<tr>
<td><label>one</label></td>
<td><label>two</label></td>
<td><label>Three</label></td>
<td><label>Four</label></td>
</tr>
<tr>
<td><label>one</label></td>
<td><label>two</label></td>
<td><label>Three</label></td>
<td><label>Four</label></td>
</tr>
</tbody>
</table>
You are using the incorrect name for the property it is border-top-left-radius not border-radius-top-left and you need a border to apply a border radius to.
EDIT: I ended up switching to an ul/li list. But I am still wondering, there should be a solution possible with tables as well.
I've got a html table set up with borders on it's TD elements. Displays perfect in modern browsers. But, although it can be debated, I wan't to support IE8 as much as possible.
Frankly, IE8 is doing weird stuff with the borders of the table. I've looked at a lot of questions asked down here but none of which i've found yield the answer to my situation.
The table should have borders on all sides of it's TD elements. IE8 only renders the left and buttom border. As you can see on the screenshot below. The code is found under the image. I can't find the solution, hope some of you got any idea.
Thanks so much for any thoughts!
Link: Working example
The CSS Code:
.pricing-table{
border-collapse:collapse;
margin:20px;
padding:20px;
}
.pricing-table td {
width: 210px;
padding: 10px 0px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #e9e9e9;
border-left:1px solid #cdcdcd;
border-right:1px solid #cdcdcd;
font-size: 14px;
font-weight:bold;
line-height: 35px;
color: #555;
text-shadow: 0 1px 0 #fff;
background: -webkit-gradient(linear, left top, left bottom, from(rgb(250, 250, 250)), to(rgb(237, 237, 237)));
background: -webkit-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -moz-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -o-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: -ms-linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
background: linear-gradient(top, rgb(250, 250, 250), rgb(237, 237, 237));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fafafa', EndColorStr='#ededed'); /*IE6 & IE7 gradient*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fafafa', endColorstr='#ededed')"; /*IE8 gradient*/
}
.pricing-table td span.icon-accept-16x16{
display:inline-block;
width:16px;
height:16px;
margin:0 10px;
background: url(img/icon-accept-16x16.png);
}
.pricing-table td.orange{
background:#ee5420;
filter:none;/*Fallback: IE 8 and below*/
font: 'Open Sans', sans-serif;
font-weight:600;
border-bottom:1px solid #b73f16;
border-top:1px solid #cdcdcd;
border-left:1px solid #ee5420;
border-right:1px solid #ee5420;
}
.pricing-table td.orange h2{
margin:0;
padding:0 0 0 36px;
font-size: 20px;
font-weight:600;
color:#FFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
line-height:40px;
}
/* Table Head */
.pricing-table thead td.orange {
border:none;/*Not ideal, try ti find a fix*/
-webkit-top-left-border-radius: 5px;
-moz-border-top-left-radius: 5px;
border-top-left-radius: 5px;
-webkit-top-right-border-radius: 5px;
-moz-border-top-right-radius: 5px;
border-top-right-radius: 5px;
}
/* Footer */
.pricing-table tfoot td {
width: 190px;
padding: 20px 10px;
text-align: center;
line-height: 18px;
background: #ffffff;
filter:none;
font-size: 11px;
font-weight:normal;
color: #828282;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-box-shadow: 0px 2px 0px #e4e4e4;
-moz-box-shadow: 0px 2px 0px #e4e4e4;
box-shadow: 0px 2px 0px #e4e4e4;
}
And here's the HTML:
<table class="pricing-table" >
<thead>
<tr>
<td class="orange">
<h2>Voor leerlingen</h2>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>Online topotrainer</td>
</tr>
<tr>
<td>Topografieboekje</td>
</tr>
<tr>
<td>Jouw resultaten</td>
</tr>
<tr>
<td class="orange">
<h2>Voor docenten</h2>
</td>
</tr>
<tr>
<td>Toetsen genereren</td>
</tr>
<tr>
<td>Leerlingen volgen</td>
</tr>
<tr>
<td>Boekjes bestellen</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Topografie in de Klas is een 100% gratis lesmethode voor Topografie in het onderwijs. </td>
</tr>
</tfoot>
</table>