Невозможно динамически настроить код Adsense в HTML-таблице

Question

Создание таблицы для динамического отображения содержимого означает, что когда кто-то уменьшает размер окна или открывает веб-страницу на меньшем экране, это корректирует содержимое и не нарушает структуру таблицы. Приведенный ниже код работает хорошо, но когда я помещаю код AdSense в новую строку, таблица не работает динамически. Дайте решение только используя css.

.oclass {
  border-radius: 4px;
  text-align: justify;
  border: 1px solid #000;
  vertical-align: middle;
  width: auto;
  margin-bottom: 1em;
  position: relative;
  padding: 4px 32px 4px 32px;
}

.oclass2 {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: #eee;
  border-radius: 4px 0 0 4px;
  width: 20px;
  padding: 4px;
  border-right: 1px solid black;
}

.tclass {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 0;
  padding: 1px;
  vertical-align: middle;
  text-align: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  line-height: 20px;
}

.eclass {
  display: none;
}

#qtb1 td {
  vertical-align: top;
}

<table id="qtb1">
  <tbody>
    <tr>
      <td width="35px">Q1.</td>
      <td>न्यायमूर्ति यू. सी. बनर्जी आयोग का गठन किया गया ?
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="oclass" id="bdy11" onclick="myFunction('bdy11', 'opn11', 
    'tic11', 'ans1', '1','1')">
          <span class="oclass2" id="opn11">A.</span> गोधरा दंगो की जॉच के लिए
          <span class="tclass" id="tic11"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="oclass" id="bdy12" onclick="myFunction('bdy12', 'opn12', 
    'tic12', 'ans1', '2','1')">
          <span class="oclass2" id="opn12">B.</span> सिख दंगो की जॉच के लिए
          <span class="tclass" id="tic12"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="oclass" id="bdy13" onclick="myFunction('bdy13', 'opn13', 
    'tic13', 'ans1', '3','1')">
          <span class="oclass2" id="opn13">C.</span> चारा घोटाला की जॉच के लिए
          <span class="tclass" id="tic13"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="oclass" id="bdy14" onclick="myFunction('bdy14', 'opn14', 
    'tic14', 'ans1', '4','1')">
          <span class="oclass2" id="opn14">D.</span> कोयला घोटाला की जॉच के लिए
          <span class="tclass" id="tic14"></span>
        </div>
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="eclass" id="ans1">
          <strong>Ans:</strong> गोधरा दंगो की जॉच के लिए
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
        </script>
        <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5674344587011658" data-ad-slot="7222486128"></ins>
        <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
        </script>
      </td>
      <td></td>
    </tr>

  </tbody>
</table>

Answer 1

Попробуйте это,

(adsbygoogle = window.adsbygoogle || []).push({});

<style>
.oclass{
 border-radius: 4px; 
 text-align:justify; 
 border: 1px solid #000; 
 vertical-align: middle; 
 width:auto; 
 margin-bottom: 1em; 
 position: relative; 
 padding: 4px 32px 4px 32px;
 }

.oclass2{
 position: absolute; 
 left: 0; 
 top: 0; 
 bottom: 0; 
 background: #eee; 
 border-radius: 4px 0 0 4px; 
 width: 20px; 
 padding: 4px; 
 border-right: 1px solid black;
}

.tclass{
 position:absolute; 
 right:2px; 
 top:2px; 
 bottom:0; 
 padding:1px; 
 vertical-align:middle; 
 text-align:center; 
 width:20px; 
 height:20px; 
 border-radius:50%; 
 font-size:20px; 
 color:#fff; 
 line-height:20px;
}

.eclass{
 display:none;
}
#qtb1 td {
    vertical-align:top;
}
</style>

<table id="qtb1">
<tbody>
<tr>
<td width="35px">Q1.</td>
<td>न्यायमूर्ति यू. सी. बनर्जी आयोग का गठन किया गया ?
                                                    </td>
</tr>
<tr>
<td></td>
<td><div class="oclass" id="bdy11" onclick="myFunction('bdy11', 'opn11', 
'tic11', 'ans1', '1','1')">
<span class="oclass2" id="opn11">A.</span>
                                                            गोधरा दंगो की जॉच 
के लिए                                                            <span 
class="tclass" id="tic11"></span></div>
</td>
</tr>
<tr>
<td></td>
<td><div class="oclass" id="bdy12" onclick="myFunction('bdy12', 'opn12', 
'tic12', 'ans1', '2','1')">
<span class="oclass2" id="opn12">B.</span>
                                                            सिख दंगो की जॉच के 
लिए                                                            <span 
class="tclass" id="tic12"></span></div>
</td>
</tr>
<tr>
<td></td>
<td><div class="oclass" id="bdy13" onclick="myFunction('bdy13', 'opn13', 
'tic13', 'ans1', '3','1')">
<span class="oclass2" id="opn13">C.</span>
                                                            चारा घोटाला की जॉच 
के लिए                                                            <span 
class="tclass" id="tic13"></span></div>
</td>
</tr>
<tr>
<td></td>
<td><div class="oclass" id="bdy14" onclick="myFunction('bdy14', 'opn14', 
'tic14', 'ans1', '4','1')">
<span class="oclass2" id="opn14">D.</span>
                                                            कोयला घोटाला की 
जॉच के लिए                                                            <span 
class="tclass" id="tic14"></span></div>
</td>
</tr>
<tr>
<td></td>
<td><div class="eclass" id="ans1">
<strong>Ans:</strong> 
                                                गोधरा दंगो की जॉच के लिए                                                
</div>
</td>
</tr>
<tr>
<td>
<ins class="adsbygoogle"
 style="display:block; text-align:center;"
 data-ad-layout="in-article"
 data-ad-format="fluid"
 data-ad-client="ca-pub-5674344587011658"
 data-ad-slot="7222486128"></ins>
</td>
<td></td>
</tr>