Заполнение таблицы должно быть 8px, но при модальном заполнении должно быть ноль, чтобы заполнить всю ячейку, см. Рисунок 
Как я могу обратиться к этому конкретному селектору, вложенному в таблицу и под различные виды классов и идентификаторов?
Я пробовал комбинации с: #tabletu .modal #myBtn2 td, но ни один из них не убрал отступы.Например:
// 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">×</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>
С помощью А. Мешу я дошел до этого, но под модалом все еще есть маленькая маленькая белая линия.