How to set max-width to tbody or tr

Hi guys. I want to set max width to a row of a row but it does not work. Can you help me?

 .wrapper {
        width: 100%;
        table-layout: fixed;
        background-color: var(--clr-secondary);
        padding-block: 60px;
        padding-inline: 100px;
        & tr {
          max-width: 856px;
        }
        & tbody {
          max-width: 856px;
        }
      }

 <table class="wrapper">
      <tbody>
        <tr>
          <td><img src="./assets/tick.png" alt="Tick Image" /></td>
        </tr>
      </tbody>
    </table>

 .wrapper {
        width: 100%;
        table-layout: fixed;
        background-color: var(--clr-secondary);
        padding-block: 60px;
        padding-inline: 100px;
        & tr {
          max-width: 856px;
        }
        & tbody {
          max-width: 856px;
        }
      }

 <table class="wrapper">
      <tbody>
        <tr>
          <td><img src="./assets/tick.png" alt="Tick Image" /></td>
        </tr>
      </tbody>
    </table>

11 Replies

Kevin Powell•2mo ago

Is there a reason you aren't setting .wrapper with a max-width instead? I don't use a lot of tables, but afaik, you can't declare width on a tr or tbody. with the way tables work, having a width on tr doesn't really make sense. I'd have to check the spec, but I think table elements are sort of similar to inline elements in that way

Alex•2mo ago

In the fixed table layout algorithm, the width of each column is determined as follows: A column element with explicit width sets the width for that column. Otherwise, a cell in the first row with explicit width determines the width for that column. Otherwise, the column gets the width from the shared remaining horizontal space. — https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout

The table-layout:fixed is designed to fix the width of columns. You can set the width of the table by... setting the width on the table. Using table-layout:fixed doesn't do anything unless you also set a size for the column or the first cell in a row. A max-width on a tr or tbody won't do anything, because they default to table-specific display styles display:table-row and display:table-body which ignore widths, because this is not how tables are meant to work. Options: - set a max-width on the whole table in addition to width:100% and drop the table-layout:fixed entirely (or put it in a wrapper) - add <col> tags with a set width to set the width of the individual columns

MDN Web Docs

table-layout - CSS: Cascading Style Sheets | MDN

The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.

empty•2mo ago

Because I'm creating an email template and my co-worker said that I should only use table element

Kevin Powell•2mo ago

yeah, but you could put the max-width on the .wrapper, and not on the tr/tbody you also won't want to use table-layout: fixed; for email... or at least, I don't think you will 😄

empty•2mo ago

I mean the wrapper will take up 100% width of screen for background-color and I want limit the width of its content

Kevin Powell•2mo ago

So:

<div class="wrapper">
 <table>
    <tbody>
      <tr>
        <td><img src="./assets/tick.png" alt="Tick Image" /></td>
      </tr>
    </tbody>
  </table>
</div>

<div class="wrapper">
 <table>
    <tbody>
      <tr>
        <td><img src="./assets/tick.png" alt="Tick Image" /></td>
      </tr>
    </tbody>
  </table>
</div>

.wrapper {
  background-color: var(--clr-secondary);
  padding-block: 60px;
  padding-inline: 100px;
}

table {
  max-width: 586px;
}

.wrapper {
  background-color: var(--clr-secondary);
  padding-block: 60px;
  padding-inline: 100px;
}

table {
  max-width: 586px;
}

should work you can use divs too 😄

empty•2mo ago

oh. I got it. Thanks

Kevin Powell•2mo ago

tables are used for layouts because the rendering engines of email clients are old (some of them), so that means we can't use grid or flex to create the layout... but that also means things like custom properties won't work

empty•2mo ago

engines of email clients are also support div right? i'm not familiar with email template 😅

Kevin Powell•2mo ago

If you're using it as a learning opportunity, I'd say keep plugging away at it, you'll learn a ton. If you're doing this for something that's going to be used for actual emails being sent out, i'd look into some tools for creating the table for you. https://mjml.io/ is the only one I can think of off the top of my head

MJML - The Responsive Email Framework

The only framework that makes responsive email easy. MJML is a markup language designed to reduce the pain of coding a responsive email.

empty•2mo ago

Ok thank you :thumbup:

Gaming

Programming

How to set max-width to tbody or tr