Apply CSS to the first element of type th that is not hidden

Navigation
0

I have the following problem: I need to make the left border radius of a table header be round on the left side.

In principle I was going to do it by CSS telling him to apply the border radius to the first child, but it just so happens that it does not work for me since the first child is a hidden th, and I need him to apply it to the first child that is also visible. The same thing I have to do with all the tds that are not hidden. Researching a bit I have seen that in principle it is not possible only by pure CSS, and that the ideal is to resort to JQuery or JavaScript.

I would appreciate a hand, I would be worth a solution in either of them. Next I reproduce the basic structure of the HTML. As a preliminary clarification I will say that the ids are dynamic: 

<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; border-collapse: collapse;" border="1" rules="all" cellspacing="0">
    <tbody>
    <tr>
        <th style="display: none;" scope="col">#IdOculto</th>
        <th style="width: 200px;" scope="col">A1</th>
        <th style="width: 250px;" scope="col">A2</th>
        <th style="width: 200px;" scope="col">A3</th>

    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">57</td>
        <td>D1</td>
        <td>D1</td>
        <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">58</td>
        <td>D2</td>
        <td>D2</td>
        <td>D2</td>
    </tr>       

    </tbody>

    
asked by Endika Tapia López 16.10.2018 в 13:48
source

5 answers

1

I'll write you a Jquery selector that would get you to select only the th that interests you. What it does is select the first th that is visible.

JQUERY 

$('th:visible').first().css('color', 'red');

I put a color change to red so you can see the th that is affecting the selector. Inside you will find the styles you need for that th .

    
answered by 16.10.2018 в 16:27
0

You could try to remove the style you have for the table and the options marked as border and rules and try adding in css, if the first children are always going to be hidden. 

table tr th:nth-child(2),td:nth-child(2) {
  border-top-left-radius: 10px;
  overflow: hidden;
}
th,td{
  border:1px solid black
}
    
answered by 16.10.2018 в 14:57
0

a very simple way is to add in your style: 

border-top-left-radius: 40px;

With this round the top left.

Another way in your CSS file: 

.mTabla{
    border-top-left-radius: 40px;
}
    
answered by 16.10.2018 в 14:02
0

If possible, select the first visible element with pure CSS. You can use the + selector, which specifies the element immediately adjacent to the specified element. In this way, the CSS is like this: 

.mTabla tbody tr td[style*='display'] + td{
    background: #ccc;
}
<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; border-collapse: collapse;" border="1" rules="all" cellspacing="0">
    <thead>
      <tr>
          <th style="display: none;" scope="col">#IdOculto</th>
          <th style="width: 200px;" scope="col">A1</th>
          <th style="width: 250px;" scope="col">A2</th>
          <th style="width: 200px;" scope="col">A3</th>
      </tr>
    </thead>
    <tbody>
      <tr id="sdsdsds" style="cursor: pointer;">
          <td style="display: none;">57</td>
          <td>D1</td>
          <td>E1</td>
          <td>F1</td>
      </tr>
      <tr id="asdasd" style="cursor: pointer;">
          <td style="display: none;">58</td>
          <td>D2</td>
          <td>E2</td>
          <td>F2</td>
      </tr>
    </tbody>

The reason why :nth-child() and :nth-of-type() do not work is because the td that are hidden are, therefore, the same type of element that we want to select, and overwrites the style rule of a :not() . This way, the td:not([style*="display: none"]):first-child() selector does not work, since the hidden element is the first-child of the list of td .

    
answered by 16.10.2018 в 17:24
0

To do what you want first, you must remove the attribute rules="all" from your table and the property of the style border-collapse: collapse; , why? because the water can not be mixed with the oil, that is, if you send to collapse the border of the table you will not be able to visualize said edge and in the absence of all squares and the rules=all is deprecated, that is in disuse, then you can place the css property that can give you that border effect like this: 

.mTabla th:nth-child(2){
  border-top-left-radius:6px;
}


.mTabla th, td{
  border:1px solid;
}

.mTabla th:nth-child(2){
  border-top-left-radius:6px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
  <tbody>
    <tr>
      <th style="display: none;" scope="col">#IdOculto</th>
      <th style="width: 200px;" scope="col">A1</th>
      <th style="width: 250px;" scope="col">A2</th>
      <th style="width: 200px;" scope="col">A3</th>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">57</td>
        <td>D1</td>
        <td>D1</td>
        <td>D1</td>
    </tr>
    <tr id="sdsdsds" style="cursor: pointer;">
        <td style="display: none;">58</td>
        <td>D2</td>
        <td>D2</td>
        <td>D2</td>
    </tr>   
  </tbody>
</table>

With jquery: 

$('th:visible').first().css('border-top-left-radius', '6px');
.mTabla th, td{
  border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <table class="mTabla" id="sdsdsdsf" style="margin: 0px auto; width: 100%; text-align: left; " cellspacing="0">
      <tbody>
        <tr>
          <th style="display: none;" scope="col">#IdOculto</th>
          <th style="width: 200px;" scope="col">A1</th>
          <th style="width: 250px;" scope="col">A2</th>
          <th style="width: 200px;" scope="col">A3</th>
        </tr>
        <tr id="sdsdsds" style="cursor: pointer;">
            <td style="display: none;">57</td>
            <td>D1</td>
            <td>D1</td>
            <td>D1</td>
        </tr>
        <tr id="sdsdsds" style="cursor: pointer;">
            <td style="display: none;">58</td>
            <td>D2</td>
            <td>D2</td>
            <td>D2</td>
        </tr>   
      </tbody>
    </table>
    
answered by 16.10.2018 в 19:09
Help to find the error Add products automatically by means of bar code scanner input