Create an "opaque stripe" on top of a tr

6

I have a dynamically generated table:

IwouldliketocreateaclassinCSSthatwouldmakea"layer" overhead with transparency.

Example:

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

The table code is basic, they are <tr> and <td> , so it makes no difference to post their code.

    
asked by rbz 27.07.2018 в 19:12
source

3 answers

5

Option 1:

In this option you put a box-shadow: inset big in TR, and put position: relative in TD to be able to put z-index:-1 in them and play back of the shadow of TR. The intensity of box-shadow does not need to be 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 hover in tr vc shows ::after . See that it is over 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>
    
answered by 27.07.2018 / 19:36
source
3

I think this way it can help you. And it's quite 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>
    
answered by 27.07.2018 в 20:02
1

You can create any element (a div for example) within 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 div to make it easier to position within TD , hence you can use the size in percentage and facilitate placement.

    
answered by 27.07.2018 в 19:35