1

I have a table, I use CSS to blur this table.

But it also blurs all the text in my table.

The CSS I am using:

table#tablepress-2 {
  background:white;
  background:rgba(255,255,255,0.8);

  filter:blur(4px);
  -o-filter:blur(4px);
  -ms-filter:blur(4px);
  -moz-filter:blur(4px);
  -webkit-filter:blur(4px);
}

Is there any method to not blur all the text in this table?

It currently looks like this:

aftershock
  • 69
  • 13
Ave
  • 4,338
  • 4
  • 40
  • 67
  • it's pretty logical that the text is blurred, what do you actually want to blur in that table ? – ThS Sep 26 '18 at 06:57
  • @ths I want to blur it like that image: https://i.imgur.com/DREtZP1.jpg Mean blur the table but keep all text is not blur. – Ave Sep 26 '18 at 07:03
  • but you don't even need the blur filter to achieve this ?! – ThS Sep 26 '18 at 07:05
  • I think if you provide the background color of that table as rgba then, you can achieve the same effect – Code_Ninja Sep 26 '18 at 07:12

4 Answers4

4

You can make this by wrapping table inside a div and blur it.

.table-wrap:before {
    position: absolute;
    background: rgba(197, 139, 139, 0.5);
    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter: blur(4px);
    content: '';
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.table-wrap {
    position: relative;
}

table.table {
    position: relative;
    z-index: 2;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="table-wrap">
 <table class="table">
     <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
    </table>
</div></div>
Anuresh VP
  • 607
  • 6
  • 19
3

You don't need blur effects to achieve this. 

.main {
  position: relative;
  float: left;
  width: 100%;
  padding: 35px 0;
  background: url(https://www.scad.edu/sites/default/files/styles/swarm16x7_1170/public/Academics/Illustration/Tim-Kaminski_Illustration_Drummond-A1-Workshop.jpg?itok=Z2N87KzS&timestamp=1418851276) center center no-repeat;
  margin-bottom: 35px;
}


/* Normal Css */

table.tg {
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  position: relative;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
  text-align: center;
  ;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-0lax {
  text-align: left;
  vertical-align: top;
  text-align: center;
}
<div class="main">
  <table class="tg">
    <tr>
      <th class="tg-0lax">Head 1</th>
      <th class="tg-0lax">Head 2</th>
      <th class="tg-0lax">Head 3</th>
      <th class="tg-0lax">Head 4</th>
      <th class="tg-0lax">Head 5</th>
    </tr>
    <tr>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
    </tr>
    <tr>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
    </tr>
    <tr>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
      <td class="tg-0lax">Table Data</td>
    </tr>
  </table>
</div>
codesayan
  • 1,705
  • 11
  • 22
1

You don't even need the blur filter to achieve the result shown in the screenshot you provided in the comments section, a white background with some opacity will do the trick.

body {
  background: url("https://www.w3schools.com/howto/img_mountains.jpg") no-repeat center;
  background-size: cover;
}
table#tablepress-2 {
  /* the next line does the trick */
  background-color: rgba(255, 255, 255, .65); /* change this per your requirements */
  /* just for the demo */
  width: 75%;
  margin: 15px auto;
}
<table id="tablepress-2">
  <thead>
<tr>
  <th>Name</th>
  <th>Age</th>
  <th>Favourite pet</th>
</tr>
  </thead>
  <tbody>
<tr>
  <td>John Doe</td>
  <td>23</td>
  <td>Cat</td>
</tr>
<tr>
  <td>Mily Smith</td>
  <td>31</td>
  <td>Dog</td>
</tr>
<tr>
  <td>John Doe</td>
  <td>23</td>
  <td>Cat</td>
</tr>
<tr>
  <td>Mily Smith</td>
  <td>31</td>
  <td>Dog</td>
</tr>
<tr>
  <td>John Doe</td>
  <td>23</td>
  <td>Cat</td>
</tr>
<tr>
  <td>Mily Smith</td>
  <td>31</td>
  <td>Dog</td>
</tr>
  </tbody>
</table>
ThS
  • 4,597
  • 2
  • 15
  • 27
0

Text is also a part of table so try to apply filter property on child element of table what ever you want to blur .

kundan kumar
  • 66
  • 4