Удалить пробел из ячейки таблицы после уменьшения ширины изображения

Question

Это, вероятно, действительно просто, но я застрял, пытаясь удалить пробел из ячейки таблицы при уменьшении ширины вложенного изображения.

Например, я хочу удалить пробел в этом примере

JSFiddle: https://jsfiddle.net/8qm61hny/

HTML:

    <div class="qtest">
        <div class="q_test">
            <div class="q_top">
            </div>
            <div class="q_test99">
                <table class="test_table">
                    <tbody>
                        <tr>
                            <td class="q_p1">1st</td>
                            <td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
                            <td class="q_name">Name1</td>
                        </tr>
                        <tr>
                            <td class="q_p1">1st</td>
                            <td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
                            <td class="q_name">Name2</td>
                        </tr>
                        <tr>
                            <td class="q_p1">1st</td>
                            <td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
                            <td class="q_name">Name3</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

CSS :

.q_p2_img {
  width:60%;
}

Я пробовал различные варианты отображения css, но не могу найти то, что мне нужно для этого.

Answer 1

Не используйте процентное значение, потому что процентное значение будет разрешено после установки родительской ширины, так как нам нужна ссылка для ее разрешения. В вашем случае у вас будет 60% родительского размера и 40% пробела.

Вместо этого используйте значение в пикселях:

.q_p2_img {
  width: 200px;
}

<div class="qtest">
  <div class="q_test">
    <div class="q_top">
    </div>
    <div class="q_test99">
      <table class="test_table">
        <tbody>
          <tr>
            <td class="q_p1">1st</td>
            <td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
            <td class="q_name">Name1</td>
          </tr>
          <tr>
            <td class="q_p1">1st</td>
            <td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
            <td class="q_name">Name2</td>
          </tr>
          <tr>
            <td class="q_p1">1st</td>
            <td class="q_p2"><img class="q_p2_img" src="//www.geek.com/wp-content/uploads/2009/01/1_google_logo.jpg"></td>
            <td class="q_name">Name3</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 2

Используйте эту минимальную таблицу css для кросс-браузерного и адаптивного <table> стиля

html

<div class="tbl">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 11</td>
        <td>Data 12</td>
      </tr>
      <tr>
        <td>MoreData 21</td>
        <td>MoreData 22</td>
      </tr>
    </tbody>
  </table>
</div>

css

.tbl {
  width: 100%; /* table width */
  box-sizing: border-box;
  overflow-x: auto;
}
.tbl * {
  margin: 0;
  box-sizing: border-box;
}
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  font-size: 0; /* remove gap */
}
thead, tbody, tr {
  width: inherit;
}
th, td {
  vertical-align: top;
  text-align: left;
  white-space: normal;
  font-size: 16px;
}
@media (max-width: 767.9px) {
  table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
}