Set `` cells containing video to automatically shrink to fit

Question

I want the layout of my page to look like this:

Heading        | video
text text text | video


video | Heading
video | text text text

Heading        | video
text text text | video

The videos are all the same size, and should not take up fully half of the table row. However, naively using a <table>, the cells were split evenly down the middle:

How can I get the cells containing video to shrink so that the text is a wide as possible? Not that this means the column seperators will not be aligned between rows, though they should be aligned between every two rows. Again, the videos are all the same size. I apologize if this is a n00b question, I have no web dev experience. Here's the code I used:

    <table cellspacing="50">
      <tr>
        <td valign="top"  >
          <h2>Heading 1</h2>
          <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </td>
        <td>
          <video autoplay loop>
            <source src="video/video1.mp4" type="video/mp4">
          </video>
        </td>
      </tr>
            <tr>
        <td>
          <video autoplay loop>
            <source src="video/video2.mp4" type="video/mp4">
          </video>
        </td>        
        <td>
          <h2>Heading 2</h2>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </p>
        </td>

      </tr>
    </table>

What do you mean by "text is a wide as possible"? What if I put the text on one line and it forced a side-scroll on you? Need to be more specific in what you want. — Waxi, Apr 17 '17 at 19:39
I mean the cells containing the videos should only be as wide as the videos; there shouldn't be any horizontal whitespace between video cells and text cells except for the inter-cell padding. — Elliot Gorokhovsky, Apr 17 '17 at 19:40
The obvious thing to do is to stop using tables for layout. I mean, [people have been saying not to since at least 2004](http://phrogz.net/css/WhyTablesAreBadForLayout.html). Indeed some of the [first questions on this very site were about why using tables is a bad idea](http://stackoverflow.com/q/82391/215552). It appears as though you want to use a CSS Grid Layout. Do some research on that; it should help you solve your issue. — Heretic Monkey, Apr 17 '17 at 19:45
@MikeMcCaughan Awesome, thanks. I have tons of programming experience, so my friend assumed I could easily make him a website, but I've literally never touched HTML/CSS in my life. So I just need some pointers in the right direction. — Elliot Gorokhovsky, Apr 17 '17 at 19:46

score 0 · Answer 1 · answered Apr 17 '17 at 20:22

Turns out it's easy to make cells span columns with the colspan attribute. So I just added colspan="2" to the text cells, and then added the following row at the bottom:

    <tr>
      <td width="25%"></td>
      <td width="50%"></td>
      <td width="25%"></td>
    </tr>

So the video will always be 25% width, and the text will always be 75% width.

Set `` cells containing video to automatically shrink to fit

1 Answers1