1

I have a table in which some rows contain text and other rows contain images (inside a td with a colspan).

The problem is that if the image is larger than the width of the other rows(with text), it changes the size of the table. I actually want the image to shrink to the width of the table that is already there without having to give a specific pixel value.

table {
  display: inline-table;
  /* border-collapse: collapse; */
  border-spacing: 0.1rem 1rem;
}

td {
  border: 2px solid rgb(0, 140, 255);
  padding: 0.2rem 2rem;
  border-radius: 1em;
  margin-top: 20px;
  text-align: center;
}

.answer-button {
  cursor: pointer;
  padding: 0.2rem 1.8rem;
}
<table>
  <tr>
    <td class="year edge-left">1</td>
    <td class="year edge-right">O1</td>
    <td class="answer-button incorrect edge-left">A</td>
    <td class="answer-button correct">B</td>
    <td class="answer-button incorrect">C</td>
    <td class="answer-button incorrect edge-right">D</td>
  </tr>
  <tr>
    <td colspan="6"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80"></td>
  </tr>
  <tr>
    <td class="year edge-left">2</td>
    <td class="year edge-right">B1</td>
    <td class="answer-button correct edge-left">A</td>
    <td class="answer-button incorrect">B</td>
    <td class="answer-button incorrect">C</td>
    <td class="answer-button incorrect edge-right">D</td>
  </tr>
</table>

The width of the table in the second image is the same as that of a table without that image. And I want the image to shrink to that width, instead of the image changing the width of the table.

Edit: Current state:

Desired state

The dimensions of the screenshots are nearly same in both, you can see the difference in the width of the table. I achieved the screenshot for the second image by setting a fixed pixel value for the image, but I don't think that would be a good solution.

Nayan Gautam
  • 122
  • 1
  • 5

2 Answers2

1

Use width:0;min-width:100%; with the image

table {
  display: inline-table;
  border-spacing: 0.1rem 1rem;
}

td {
  border: 2px solid rgb(0, 140, 255);
  padding: 0.2rem 2rem;
  border-radius: 1em;
  margin-top: 20px;
  text-align: center;
}

.answer-button {
  cursor: pointer;
  padding: 0.2rem 1.8rem;
}

img {
  width:0;
  min-width:100%;
  display:block;
}
<table>
  <tr>
    <td class="year edge-left">1</td>
    <td class="year edge-right">O1</td>
    <td class="answer-button incorrect edge-left">A</td>
    <td class="answer-button correct">B</td>
    <td class="answer-button incorrect">C</td>
    <td class="answer-button incorrect edge-right">D</td>
  </tr>
  <tr>
    <td colspan="6"><img src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80"></td>
  </tr>
  <tr>
    <td class="year edge-left">2</td>
    <td class="year edge-right">B1</td>
    <td class="answer-button correct edge-left">A</td>
    <td class="answer-button incorrect">B</td>
    <td class="answer-button incorrect">C</td>
    <td class="answer-button incorrect edge-right">D</td>
  </tr>
</table>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • I'm very new to the scene and from what I know so far, I can't understand how this works. Could you please explain it? – Nayan Gautam Aug 03 '20 at 08:24
  • @NayanGautam using width:0 means that the image width will not contribute to the width of the td and the table so it's like it doesn't exist then using min-width:100% means take at least the width of the td that was calculated previously without considering the image width. – Temani Afif Aug 03 '20 at 08:40
  • Ohh, that's very neat. Thanks again. – Nayan Gautam Aug 03 '20 at 08:52
0

Add position:relative to the cell that contains the image, then set the image to a maximum width of 100%. If you need to do the same for the height, set the image to maximum height of 100%, but you will need to define a height for the cell that contains the image.

table {
  display: inline-table;
  /* border-collapse: collapse; */
  border-spacing: 0.1rem 1rem;
}

td {
  border: 2px solid rgb(0, 140, 255);
  padding: 0.2rem 2rem;
  border-radius: 1em;
  margin-top: 20px;
  text-align: center;
}

.answer-button {
  cursor: pointer;
  padding: 0.2rem 1.8rem;
}
<table>
  <tr>
    <td class="year edge-left">1</td>
    <td class="year edge-right">O1</td>
    <td class="answer-button incorrect edge-left">A</td>
    <td class="answer-button correct">B</td>
    <td class="answer-button incorrect">C</td>
    <td class="answer-button incorrect edge-right">D</td>
  </tr>
  <tr>
    <td colspan="6" style="position:relative"><img style="max-width:100%" src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;w=1000&amp;q=80"></td>
  </tr>
  <tr>
    <td class="year edge-left">2</td>
    <td class="year edge-right">B1</td>
    <td class="answer-button correct edge-left">A</td>
    <td class="answer-button incorrect">B</td>
    <td class="answer-button incorrect">C</td>
    <td class="answer-button incorrect edge-right">D</td>
  </tr>
</table>
Wais Kamal
  • 5,858
  • 2
  • 17
  • 36
  • Thank you for your answer but it didn't work for me. I believe it seems to work here because of the size of the snippet preview, but I got the problem back when I viewed your solution in Full page view. – Nayan Gautam Aug 03 '20 at 08:04