Create an "opacity" on top of a <tr>

Asked

Viewed 555 times

5

I have a dynamically generated table:

painel

I would like to create a class in CSS to make a "layer" on top, with transparency.

Example:

tarja

If I use the background-color, it will only change the background, so it would have to be something on top. Then it would not serve.

Table code is basic, are <tr> and <td>, so it makes no difference to post her code.

html css

  • Painting the background and stirring the opacity of tr may give a very similar result. Have you tried?

  • So, but just change the background, the elements stay on top as I said about the background-color... unless it is otherwise, and/or has how to "up" the background of the <tr> on top of the <td>.

  • But you also touched the opacity of <tr>? By reducing the opacity, both the background and the content will be transparent, it may be close to the result you want.

  • @bfavaretto I think that’s what the hugocsl replied... I think that was it position: absolute; that sends forward! Thank you!

  • Yes, his answer is the best way. Maybe it’s as generic as possible. I just don’t think it works without border-Collapse in the table.

  • @bfavaretto really he ran away from <tr>...

  • @bfavaretto exactly, if leaving the edge Collapse is a soft space between one cell and another....

  • 1

    @bfavaretto I managed to do without clocar the border-Collapse in table :), although it is not very elegant... Check out the option 1 I edited in reply.

  • 1

    Good @hugocsl. In this case gambiarra is valid, because it is not a trivial problem (as you know, you cannot violate the HTML syntax of the tables).

  • 1

    A form using JS: https://jsfiddle.net/zd3uwgsh/7/

  • @That way you created a <spam> over the <tr>, and so I don’t even need to change the CSS, just add the class to the <tr> that I need to put to Arja, would that be?

  • 1

    Almost that. Just the class .overlay that you need to put in CSS, but if you don’t want to touch CSS you can put the properties directly inline in span by JS. As spans have position and fixed height, if you want it to be responsive, you need to add some more codes, but that would be no problem.

  • But in general that’s right, just put the class . Arja na tr que vc quer.

Show 8 more comments

3 answers

4


Option 1:

In this option you put one box-shadow: inset well large on TR, and puts position:relative on TD to be able to put a z-index:-1 and throw behind the shadow of the TR. The intention of the box-shadow and not need to set border-collapse in table due to its framework.

.tab {
    width: 100%;
}
.tab tr.ativa  {
    box-shadow: inset 0 0 0 1000px rgba(255,0,0,0.5);
}
.tab tr td  {
    padding: 10px;
    position: relative; 
    z-index: -1;
}
<table class="tab">
    <tr>
        <td>
            <item>1</item>
        </td>
        <td>
            <item>2</item>
        </td>
        <td>
            <item>3</item>
        </td>
        <td>
            <item>4</item>
        </td>
    </tr>
    <tr class="ativa">
        <td>
            <item>a</item>
        </td>
        <td>
            <item>s</item>
        </td>
        <td>
            <item>d</item>
        </td>
        <td>
            <item>f</item>
        </td>
    </tr>
    <tr>
        <td>
            <item>a</item>
        </td>
        <td>
            <item>s</item>
        </td>
        <td>
            <item>d</item>
        </td>
        <td>
            <item>f</item>
        </td>
    </tr>
</table>

Option 2:

Solution and creating a ::after in tds and in the tr you show the ::after. See that he is above the content as you wanted.

.tab {
  width: 100%;
  border-collapse: collapse;
}
.tab td {
  padding: 10px;
  position: relative;
}
.tab tr:hover td::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: red;
  opacity: 0.5;  
}
.tab tr.ativa td::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: red;
  opacity: 0.5;  
}
<table class="tab">
  <tr>
    <td>
      <item>1</item>
    </td>
    <td>
      <item>2</item>
    </td>
    <td>
      <item>3</item>
    </td>
    <td>
      <item>4</item>
    </td>
  </tr>
  <tr class="ativa">
    <td>
      <item>a</item>
    </td>
    <td>
      <item>s</item>
    </td>
    <td>
      <item>d</item>
    </td>
    <td>
      <item>f</item>
    </td>
  </tr>
  <tr>
    <td>
      <item>a</item>
    </td>
    <td>
      <item>s</item>
    </td>
    <td>
      <item>d</item>
    </td>
    <td>
      <item>f</item>
    </td>
  </tr>
</table>

  • But that way it would be on everyone by passing the pointer, isn’t it? If it is, it wouldn’t be that. I need it to stay fixed. Because it will be some who will have this idea. And then the idea for a class, so I can put or not dynamically.

  • @RBZ No, it will only stay on the TR that you pass the mouse. See in the edition I did in the reply that includes another TR. I understand I will edit novamelte

  • @RBZ edited again, now notice that the TR with the active . class turns red straight, even without the mouse in it.

  • That! Exactly! .. Just a question, I have to keep the tr:hover td::after? Or I could just do the tr.ativa td::after?

  • @RBZ can remove this class quietly. and clone the active class on the TR you want. Or comment on the CSS you need later...

  • Dude, it didn’t work. It starts at the top of the page. The biggest problem is that I use a framework, so I need to create a class at the end, without changing the rest, if it doesn’t affect other parts. Materializecss

  • @RBZ I didn’t quite understand the problem, but I edited the answer, now I put the class="tab" in the table and adjusted the CSS to reach only the elements within the table with the class . tab

  • Now it apparently worked. But unfortunately it is killing some elements of the framework table... It would have to treat 1 to 1 right?

  • Calm down, young man, I’m thinking of a gambit here that I think will work I’ll tell you. just a minute

  • Let’s go continue this discussion in chat.

  • I opened a chat so I can send you a print

Show 6 more comments

3

I think this way it can help you. And it’s very simple:

table, th, td {
border: 1px solid black;
padding: 5px 10px;
}
table{
background: #e0e0e0;
}
td{
border:none;
}

.red {
background: red;
opacity: .5;
}
<table cellpadding="3" cellspacing="0">
<tbody>
	<tr>
		<td> Nº</td>
		<td> HORA</td>
		<td> Placa</td>
		<td> Tipo</td>
		<td> Tara</td>
	</tr>
	<tr class="red">
		<td> Nº</td>
		<td> HORA</td>
		<td> Placa</td>
		<td> Tipo</td>
		<td> Tara</td>
	</tr>
	<tr>
		<td> Nº</td>
		<td> HORA</td>
		<td> Placa</td>
		<td> Tipo</td>
		<td> Tara</td>
	</tr>
</tbody>
</table>

  • 1

    It’s not getting on top, but it works.

1

Can create any element (a div for example) within the TD to do this:

td {
  border: solid 1px;
  padding: 4px;
  text-align: center;
  position: relative
}

.tarja {
  position: absolute;
  width: 80%;
  height: 10px;
  left: 10% ;
  margin: -12px 0 0 0;
  background-color: #000;
  opacity: 0.8
}
<table>
  <tr>
    <td>texto qualquer</td>
    <td>
    texto qualquer
    <div class="tarja"></div>
    </td>
    <td>texto qualquer</td>
  </tr>
</table>

I used position in TD and in the div to facilitate positioning within the TD, dai can use the size in percentage and facilitate positioning.

  • I can use the <div> catching all the <td>?

  • in this example has q have a div per td :(

  • ... That’s where it’s too much! rs ... I’ll test the answers here, see which one applies in a simpler way in my case. But thank you!

  • an alternative would be to use an image that could be positioned in the background of the td

  • But then I’d be behind the elements, isn’t it?

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.