How to address nested selector in css?

Question

The padding of the table should be 8px, but when there is a modal, the padding should be zero, so that it fills up the whole cell, see picture

How can I address that specific selector nested in the table and under different sorts of class and id's?

I have tried combinations with: #tabletu .modal #myBtn2 td but neither make the padding go away. For example:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

#tabletu .modal {
  padding: 0px;
}

#tabletu {
  background-color: transparent;
  border-collapse: collapse;
  width: 100%;
}

#tabletu td,
th {
  border: 1px solid #000000;
  padding: 8px;
}

#tabletu th {
  padding: 8px;
  text-align: left;
  border: 1px solid #000000;
  background-color: rgba(0, 110, 167, 1);
  color: white;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}


/* Modal Content */

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.modal td {
  padding: 0px;
}


/* The Close Button */

.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.notebook {
  border-collapse: collapse;
  width: 70%;
}

.notebook td:hover {
  background-color: #ddd;
}

.notebook td,
.notebook th {
  border: 1px solid #ddd;
  padding: 0px;
}

.block {
  display: block;
  width: 100%;
  border: none;
  background-color: rgba(0, 166, 214, 1);
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  box-sizing: border-box;
}

.block:hover {
  background-color: rgba(0, 166, 214, 0.78);
  color: black;
}

.month {
  text-align: center;
}

#category {
  padding: 8px;
}

<h2>Experiment Notebook</h2>
<center>
  <table id="tabletu" class="notebook">
    <tr id="category">
      <th></th>
      <th id="category">Test1</th>
      <th>Test2</th>
      <th>Other</th>
    </tr>
    <tr>
      <td rowspan=2 class="month">April</td>
      <td>
        <!-- Trigger/Open The Modal -->
        <button id="myBtn2" class="block">Open Modal</button>

        <!-- The Modal -->
        <div id="myModal" class="modal">

          <!-- Modal content -->
          <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
          </div>

        </div>
      </td>
      <td><button id="myBtn2" class="block">Open Modal</button></td>
      <td>Germany</td>
    </tr>
    <tr>

      <td>Berglunds snabbköp</td>
      <td>Christina Berglund</td>
      <td>Sweden</td>
    </tr>
    <tr>
      <td></td>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td></td>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td></td>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td></td>
      <td>Königlich Essen</td>
      <td>Philip Cramer</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td></td>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td></td>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
    <tr>
      <td></td>
      <td>North/South</td>
      <td>Simon Crowther</td>
      <td>UK</td>
    </tr>
    <tr>
      <td></td>
      <td>Paris spécialités</td>
      <td>Marie Bertrand</td>
      <td>France</td>
    </tr>
  </table>

</center>

With help from A. Meshu I got so far, but there is still a tiny small white line underneath the modal.

Why did you name it modal? Is it opening in a modal window? It seems that your code is just toggling the div visibility. Is it? — Ali Sheikhpour, Sep 19 '19 at 20:13
@AliSheikhpour I got the code from w3schools and if you click on it, it opens a pop up/dialog box on top. — Leo, Sep 19 '19 at 20:14

A. Meshu · Accepted Answer · 2019-09-19T20:51:01.683

1

You can solve it by adding a class to all the <td> that holds button and then style it with !important. In this example i used modalTD class:

.modalTD {padding: 0!important;} // remove horizontal padding
.modalTD button {height: 65px!important;} // make the button height wrap the entire cell

And the html looks like that:

.
.
.
<td class="modalTD"><!-- Trigger/Open The Modal -->
  <button id="myBtn2" class="block">Open Modal</button>
.
.
.

For a side-note: one day the :has pseudo-class will make our life much easier but for now it's not supporting whatsoever...

EDIT

another solution will do it more efficient but it will affect the entire row (not that visually bad i must say) that you can try is:

#tabletu tr:nth-of-type(2) td {padding: 0;}

edited Sep 19 '19 at 20:51

answered Sep 19 '19 at 20:42

A. Meshu

4,053
2
20
34

It works, it removes some padding! Thanks! Although it's not perfect yet, there is some space left vertically, but I guess I'll have to play with the height, although each cell height will be different which would be annoying to code separately for each row. Do you perhaps know a way to automatically remove all the vertical padding? Why is the first line of your code only removing horizontal padding and not vertical as well :(? – Leo Sep 19 '19 at 20:48
Glad it help. check my edit without adding class nor important (: – A. Meshu Sep 19 '19 at 20:51
Unfortunately, it also leaves a little bit of white space. I'll add the picture to my main post – Leo Sep 19 '19 at 20:52
yes, this one (#tabletu tr:nth-of-type(2) td {padding: 0;}) gives the same white space somehow – Leo Sep 19 '19 at 20:55
remove the modalTD class and add the above line. I test it with chrome and FF and there is not any gap.. – A. Meshu Sep 19 '19 at 20:57

score 0 · Answer 2 · answered Sep 19 '19 at 20:26

When we click the modal open, let's add a modal-open class to the cell. The modal-open class has css to apply 0px padding. When we close the modal, remove the class and therefor, the padding.

        #tabletu {
            background-color: transparent;
            border-collapse: collapse;
            width:100%;
        }

        #tabletu td, th {
            border: 1px solid #000000;
            padding: 8px;
        }

        #tabletu th {
            padding: 8px;
            text-align: left;
            border: 1px solid #000000;  
            background-color: rgba(0,110,167,1);
            color: white;
        }
        /* The Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 100px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgb(0,0,0); /* Fallback color */
            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
        }

        .btn-cell {
          padding: 8px;
        }
        .btn-cell.modal-open {
          padding: 0px!important;
        }
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }


        .modal td {
            padding:0px;
        }
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

        .notebook {  
            border-collapse: collapse;
            width:70%;}
        .notebook td:hover {background-color: #ddd;}
        .notebook td, .notebook th {
            border: 1px solid #ddd;
            padding: 0px;
        }
        .block {
            display: block;
            width: 100%;
            border: none;
            background-color: rgba(0, 166, 214, 1);
            padding: 14px 28px;
            font-size: 16px;
            cursor: pointer;
            text-align: center;
            box-sizing: border-box;
        }

        .block:hover {
            background-color: rgba(0, 166, 214, 0.78);
            color: black;
        }
        .month {
            text-align: center;
        }        
        #category {
            padding:8px;
        }
    </style>
</head>
<body>

    <h2>Experiment Notebook</h2>
    <center>
        <table id="tabletu" class="notebook">
            <tr id="category">
                <th ></th>
                <th id="category">Test1</th>
                <th>Test2</th>
                <th>Other</th>
            </tr>
            <tr>
                <td rowspan=2 class="month">April</td>
                <td class='btn-cell'><!-- Trigger/Open The Modal -->
                    <button id="myBtn2" class="block ">Open Modal</button>

                    <!-- The Modal -->
                    <div id="myModal" class="modal">

                        <!-- Modal content -->
                        <div class="modal-content">
                            <span class="close">&times;</span>
                            <p>Some text in the Modal..</p>
                        </div>

                    </div>
                </td>
                <td class='btn-cell'><button id="myBtn2" class="block ">Open Modal</button></td>
                <td>Germany</td>
            </tr>
            <tr>

                <td>Berglunds snabbköp</td>
                <td>Christina Berglund</td>
                <td>Sweden</td>
            </tr>
            <tr>
                <td></td>
                <td>Centro comercial Moctezuma</td>
                <td>Francisco Chang</td>
                <td>Mexico</td>
            </tr>
            <tr>
                <td></td>
                <td>Ernst Handel</td>
                <td>Roland Mendel</td>
                <td>Austria</td>
            </tr>
            <tr>
                <td></td>
                <td>Island Trading</td>
                <td>Helen Bennett</td>
                <td>UK</td>
            </tr>
            <tr>
                <td></td>
                <td>Königlich Essen</td>
                <td>Philip Cramer</td>
                <td>Germany</td>
            </tr>
            <tr>
                <td></td>
                <td>Laughing Bacchus Winecellars</td>
                <td>Yoshi Tannamuri</td>
                <td>Canada</td>
            </tr>
            <tr>
                <td></td>
                <td>Magazzini Alimentari Riuniti</td>
                <td>Giovanni Rovelli</td>
                <td>Italy</td>
            </tr>
            <tr>
                <td></td>
                <td>North/South</td>
                <td>Simon Crowther</td>
                <td>UK</td>
            </tr>
            <tr>
                <td></td>
                <td>Paris spécialités</td>
                <td>Marie Bertrand</td>
                <td>France</td>
            </tr>
        </table>

    </center>



    <script>
        // Get the modal
        var modal = document.getElementById("myModal");

        // Get the button that opens the modal
        var btn = document.getElementById("myBtn2");

        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];

        // When the user clicks the button, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
            togglePadding(true)
        }

        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
            togglePadding()
        }

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
                togglePadding()
            }
        }

        var togglePadding = function(add) {
          var buttonCells = document.getElementsByClassName('btn-cell')
            for (var i = 0; i < buttonCells.length; i++) {
              if (add) {
                buttonCells[i].classList.add('modal-open')
              }
              else {
                buttonCells[i].classList.remove('modal-open')
              }
            }
        }

    </script>

This solution doesn't make the padding go away around the modal button unfortunately. — Leo, Sep 19 '19 at 20:33

score 0 · Answer 3 · answered Sep 19 '19 at 20:27

0

As you have id selector on parent #tabletu td it overcomes class selector .modal td. You just need using !important to overcome the id selector:

.modal td {padding:0} !important

answered Sep 19 '19 at 20:27

Ali Sheikhpour

10,475
5
41
82

1

Recommending `!important` is almost always the wrong solution – j08691 Sep 19 '19 at 20:39

How to address nested selector in css?

3 Answers3