I'm trying to create a matrix effect using only HTML/CSS, and the way how i found is to apply a solid border and now erase some piece at top and bottom, someone knows how can I create this effect only using CSS (If it's possible) ?
There is a pic to explain better my objective:
A semantic way is to not give the actual element a border at all! You use :before and :after pseudo elements as transparent boxes on the right and left side. The pseudo elements are given transparent backgrounds and borders that don't overlap the content which creates the effect.
This works with any background: http://jsfiddle.net/kkYrP/8/
.box{
position:relative;
}
.box:before{
content: "";
position: absolute;
top: -2px;
left: -2px;
bottom: -2px;
width: 8%;
border: 2px solid #333;
border-right:none;
z-index:1;
}
.box:after{
content: "";
position: absolute;
top: -2px;
right: -2px;
bottom:-2px;
width: 8%;
border: 2px solid #333;
border-left:none;
z-index:1;
}
Note: if you're having clicking/hovering issues try adding pointer-events:none; on the :before and :after.
http://jsfiddle.net/kkYrP/5/
Give a border-left and right:
.box {
border-left:2px solid #333;
border-right:2px solid #333;
}
And add pseudo elements with negative z-index:
.box:before{
content:"";
background:#333;
position:absolute;
z-index: -1;
left:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
.box:after{
content:"";
background:#333;
position:absolute;
z-index: -1;
right:-2px;
width: 20px;
top:-2px;
bottom:-2px;
}
This adresses #David's problems and is based on #James's solution.
working example: http://jsfiddle.net/awesome/4gB43/1/
using background-image and linear-gradient:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image#Browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Browser_compatibility
CSS:
.wrapper {
display: inline-block;
padding: 2px;
background-repeat: no-repeat;
background-position: center;
background-size: 90% 100%;
background-color: black;
background-image: linear-gradient(white, white);
}
.wrapper-inner {
display: block;
background: white;
padding: 5px;
}
table td {
border-top: none !important;
}
table {
margin-bottom: 0 !important;
}
HTML:
<div class="wrapper">
<div class="wrapper-inner">
<table class="table">
<thead class="sr-only">
<tr>
<th>Whatever</th>
<th>Again, Whatever</th>
<th>Finally, Whatever</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>71571</td>
<td>26157</td>
</tr>
<tr>
<td>0</td>
<td>-497461.35798</td>
<td>-143674.72856</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>-6391.62859</td>
</tr>
</tbody>
</table>
</div>
</div>
Extending James Bruckner's response, I recently had to do something similar, but I had to do it with curly braces. Basically, you add the braces as content in :after and :before and you position absolute them. You can see the implementation in the link below.
http://jsfiddle.net/kaNG2/
Your HTML
<div class="box">This is a test. This is a test. This is a test. This is a test. This is a test. </div>
Your CSS
div {
padding:3em;
font-size:1em;
width:20em;
position:relative;
}
div:after,
div:before {
font-size:6.7em;
color:#999;
position:absolute;
top:0;
}
div:before {
content: "[";
left:0;
}
div:after {
right:0;
content:"]";
}
I would like to give a simplest alternative, using a linear-gradient on a pseudo-element.
This way doesn't use extra markup, and you won't have any mouse-event issue.
table.matrix {
position: relative;
background: white;
}
table.matrix:before {
content: ' ';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
z-index: -1;
background-image: linear-gradient(to right, black 10%, white 10%, white 90%, black 90%);
}
/* Non-required stuff */
td {
padding: 3px 5px;
}
<table class="matrix">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>#TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
You could draw the braces in elements next to the one containing the numbers. This will give you the effect you want.
CSS
span.leftBrace
{
width:10px;
height:100px;
float:left;
border-width:5px;
border-top-style:solid;
border-right-style:none;
border-bottom-style:solid;
border-left-style:solid;
}
span.rightBrace
{
float:right;
width:10px;
height:100px;
border-width:5px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:none;
}
span.Brace
{
height:100px;
display:inline;
width:200px;
}
HTML
<span class="Brace">
<span class ="leftBrace"> </span>
<span class =""> TEXT</span>
<span class ="rightBrace"> </span>
</span>
Example of working code here: JSFiddle
working example: http://jsfiddle.net/awesome/bA7d3/
CSS:
.table.table-custom tr:first-child td:first-child {
border-top: 2px solid black;
}
.table.table-custom tr:last-child td:first-child {
border-bottom: 2px solid black;
}
.table.table-custom tr:first-child td:last-child {
border-top: 2px solid black;
}
.table.table-custom tr:last-child td:last-child {
border-bottom: 2px solid black;
}
.table.table-custom {
border-right: 2px solid black;
border-left: 2px solid black;
}
.table.table-custom td {
border-top: none;
}
Related
How can i make the table responsive with fixed header? means it scrolls when reaches maximum viewpoint. Well, i don't want to scroll the whole page on reaching max viewpoint instead i want table to be scrolled. Also fixed header is important. I tried with box-sizing: border-box; and overflow-x:scroll;but it didn't worked , help me to create a responsive table. Thanks.
table{
border-collapse: separate;
border-spacing: 0;
width: 100%;
box-sizing: border-box;
}
thead,tbody{
box-sizing: border-box;
overflow: auto;
}
th,td{
padding: 6px 15px;
}
th{
background: #42444e;
color: #fff;
text-align: left;
position: static;
top: 50px;
}
tbody tr td img{
flex-wrap: wrap;
pointer-events: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
width: 30px;
height: 30px;
float: none;
display:block;
object-fit: fill;
border-radius: 10%;
}
tr:first-child th:first-child {
border-top-left-radius: 6px;
}
tr:first-child th:last-child {
border-top-right-radius: 6px;
}
td{
border-right: 1px solid #c6c9cc;
border-bottom: 1px solid #c6c9cc;
}
td:first-child {
border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
background: #eaeaed;
}
tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
<table>
<thead>
<tr>
<th>Image</th>
<th>ID</th>
<th>Date</th>
<th>Name</th>
<th>Email</th>
<th>Phone no.</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
<tr>
<td><img src="img/4.jpeg"></td>
<td>1</td>
<td>445445564</td>
<td>Umann goswami</td>
<td>Umanngoswami#gmail.com</td>
<td>9999672450</td>
<td>Admin</td>
</tr>
</thead>
</table>
I reviewed your codepan and conclude with that, You need to add some CSS property in your CSS file and it's work.
tbody {
height: 200px;
display: inline-block;
overflow: auto;
}
thead tr th{
position: sticky;
top:0;
left:0;
right:0;
}
set position sticky of header
and for table overflow-y set as auto
.fixTable {
overflow-y: auto;
height: 110px;
}
.fixTable thead th {
position: sticky;
top: 0;
}
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
padding: 8px 15px;
border: 2px solid #529432;
}
th {
background: #060606;
}
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="fixTable">
<table>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>2.1</td>
</tr>
<tr>
<td>1.2</td>
<td>2.2</td>
</tr>
<tr>
<td>1.3</td>
<td>2.3</td>
</tr>
<tr>
<td>1.4</td>
<td>2.4</td>
</tr>
<tr>
<td>1.5</td>
<td>2.5</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hi im having a problem where my table will overlap with my footer as shown
and here is the code for the pdf file in html and the ${allId} is a variable to call the data
const html = `
<html>
<table class="demo">
<thead>
<tr>
<th>Lamp Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>${allId}</td> //Repeated until 40 times
</tr>
</tbody>
</table>
<div class="footer">
<p
style="font-size: 15px;
text-align: left;"
>Page counter
</p>
<p
style="font-size: 15px;
font-weight: bold;"
>Copyright
</p>
</html>
<style>
#page {
size: landscape;
}
.demo {
border:1px solid #C0C0C0;
border-collapse:collapse;
padding:5px;
width:100%;
table-layout: fixed;
}
.demo tbody {
max-height:350px;
}
.demo th {
border:1px solid #C0C0C0;
padding:5px;
background:#F0F0F0;
}
.demo td {
border:1px solid #C0C0C0;
padding:5px;
max-height:350px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
color: black;
text-align: center;
flex-direction:column;
margin-top: 25px;
}
</style>
`;
can someone point out what is the problem in my styling is? I want the table to appear until it reach the footer and continue to do so for the next pages
I'm using list.js for filtering and searching, my list is very large and I need to delay the search for it, but the documentation doesn't show any examples of how to do so, all it says is this: https://listjs.com/api/#searchDelay
One example of how to do so would be very helpful
Below is the table example from List.js which I have used in this snippet to demonstrate the usage of searchDelay. Below snippet code sets a delay of 1 second before starting a search on the list. As per the changelog, this feature has been included with version 2.3.0
var options = {
valueNames: [ 'name', 'born' ],
searchDelay: 1000 // 1 second
};
var userList = new List('users', options);
.list {
font-family:sans-serif;
}
td {
padding:10px;
border:solid 1px #eee;
}
input {
border:solid 1px #ccc;
border-radius: 5px;
padding:7px 14px;
margin-bottom:10px
}
input:focus {
outline:none;
border-color:#aaa;
}
.sort {
padding:8px 30px;
border-radius: 6px;
border:none;
display:inline-block;
color:#fff;
text-decoration: none;
background-color: #28a8e0;
height:30px;
}
.sort:hover {
text-decoration: none;
background-color:#1b8aba;
}
.sort:focus {
outline:none;
}
.sort:after {
display:inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
content:"";
position: relative;
top:-10px;
right:-5px;
}
.sort.asc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content:"";
position: relative;
top:4px;
right:-5px;
}
.sort.desc:after {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #fff;
content:"";
position: relative;
top:-4px;
right:-5px;
}
<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<table>
<!-- IMPORTANT, class="list" have to be at tbody -->
<tbody class="list">
<tr>
<td class="name">Jonny Stromberg</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Jonas Arnklint</td>
<td class="born">1985</td>
</tr>
<tr>
<td class="name">Martina Elm</td>
<td class="born">1986</td>
</tr>
<tr>
<td class="name">Gustaf Lindqvist</td>
<td class="born">1983</td>
</tr>
</tbody>
</table>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>
i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.
PS: I don't like to use JS, but if it's necessary I can live with that.
JsFiddle: https://jsfiddle.net/d4m5hj6f/
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td {
border:1px solid black;
overflow: hidden;
}
th {
background-color: #eff0f0;
}
td {
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table {
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td {
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td {
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
height: 50px;
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Look here ---></th>
<th width="650px">hover Under this</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
</table>
</a>
</div>
Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.
Are you trying to achieved something like this
.content {
position: static;
}
.header {
text-align: center;
position: relative;
margin-top: 40px;
}
th, td{
border:1px solid black;
overflow: hidden;
}
th{
background-color: #eff0f0;
}
td{
background-color: #eed6b1;
height: 45px;
}
tr:nth-child(even) td {
background-color: #FFF1E1;
}
table{
table-layout: fixed;
min-width: 2000px;
border-collapse: collapse;
width: 100%;
margin-left: 5px;
}
.DZ {
text-align: center;
}
tr:hover td{
background-color: #ccc;
}
tr:nth-child(even) {
background-color: #e5e5e5;
}
tr td{
border-right: 1px solid #a5a5a5;
}
.Bezborder {
border-right: 1px solid black;
}
.ht:hover .tooltip {
display: block;
}
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin-left: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
width: 680px;
/* height: 50px;*/
font-weight: bold;
}
<div class="content">
<div class="header">
</div>
<a name="172016">
<!--1. riadok H-->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<th width="50px">C. u.</th>
<th width="30px">Zobrazit</th>
<th width="30px">Typ</th>
<th width="220px">Cislo/Meno</th>
<th width="650px">Popis</th>
<th width="130px">System</th>
<th width="100px">Dopad/Symptom</th>
<th width="100px">Dátum zadania</th>
<th width="100px">Dátum vzniku</th>
<th width="100px">Datum Verifikacie</th>
<th width="80px">Ukoncenie</th>
<th width="100px">Dátum</th>
</tr>
<!--2. riadok D-->
<tr>
<td style="text-align:center">100</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
<!--3. riadok D-->
<tr>
<td style="text-align:center">101</td>
<td style="text-align:center">X</td>
<td style="text-align:center">C </td>
<td>DOBRIKOVA/DURACKOVA</td>
<td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">ked sa vytvara uplne novu hypotheza tak nefunguje vyber tlaciarni a globalny export tiez NOK (nepouzivame)</span></td>
<td>CORAIL/CONSO</td>
<td></td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td class="DZ">06/07/2016</td>
<td style="text-align:center">OK</td>
<td class="Bezborder" style="text-align:center">07/07/2016</td>
</tr>
In your code you have a fix value for your tooltip width and height.
If you need to make the toolip width and height adjusted dynamically by its content you should remove the width and height value.
Edit based on your comment.
If you need to keep some space between the tooltip and your view port you can use margin property, this will allow some space on each d side of your tooltip.
Try to comment out as in the follow example:
https://jsfiddle.net/d4m5hj6f/6/
.tooltip {
position:absolute;
display: none;
background-color: #fafbb8;
border: 1px solid black;
border-radius: 4px;
margin: 28px;
padding: 10px;
position:absolute;
z-index: 1000;
/*width: 680px;*/
/*height: 50px;*/
font-weight: bold;
}
I would like to open a dropdown menu, aligned to the right under an icon, that appears in a span on a table header.
This is what I get:
It aligns naturally left under the icon, but I can't find a good way to align it to the right.
This is what I actually want:
Some suggestions advise using right:0; and position the filter container as absolute. This is not good in my case since I want the icon in the table header cell to be aligned to the right of the cell. Setting the container to absolute makes it difficult to align the icon in the table header.
I'm looking for a pure CSS solution if possible. The widths of the table cells and the widths of the dropdown menu are not fixed, so I cannot align things by specifying "pixels".
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:black 1px solid;
border-radius:3px;
border-collapse: collapse;
box-shadow: 0 1px 2px #d1d1d1;
}
table, th, td {
border: 1px solid black;
}
table th {
width:150px;
}
.context-icon {
float:right;
cursor:default;
color: green;
padding-right: 10px;
padding-left: 10px;
//position: absolute;
}
.filter {
visibility: hidden;
display: block;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 2px 6px;
max-height: 0px;
z-index: 1000;
height:auto;
transition: visibility 200ms, max-height 200ms ease-in-out;
//right:0;
}
.filter-open {
display: block;
max-height: 300px;
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<table>
<thead>
<tr>
<th>first</th>
<th>
second
<span>
<i class="context-icon fa fa-lg fa-filter">
<select multiple class="filter filter-open">
<option >option1</option>
<option >option2</option>
<option >option3</option>
</select>
</i>
</span>
</th>
<th>third</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
<tr>
<td>xxx</td>
<td>xxx</td>
<td>xxx</td>
</tr>
</tbody>
</table>
</body>
I have added position relative to i, and right 0px to the select :
i {
position: relative;
}
i select {
right: 0px;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
text-shadow: 1px 1px 0px #fff;
background:#eaebec;
margin:20px;
border:black 1px solid;
border-radius:3px;
border-collapse: collapse;
box-shadow: 0 1px 2px #d1d1d1;
}
table, th, td {
border: 1px solid black;
}
table th {
width:150px;
}
.context-icon {
float:right;
cursor:default;
color: green;
padding-right: 10px;
padding-left: 10px;
//position: absolute;
}
.filter {
visibility: hidden;
display: block;
position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 2px 6px;
max-height: 0px;
z-index: 1000;
height:auto;
transition: visibility 200ms, max-height 200ms ease-in-out;
//right:0;
}
.filter-open {
display: block;
max-height: 300px;
visibility: visible;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<body>
<table>
<thead>
<tr>
<th>first</th>
<th>
second
<span>
<i class="context-icon fa fa-lg fa-filter">
<select multiple class="filter filter-open">
<option >option1</option>
<option >option2</option>
<option >option3</option>
</select>
</i>
</span>
</th>
<th>third</th>
</tr>
</thead>
</table>
</body>
Please add css below:
.filter {
right: 50%;
}