HTML Table Formatting - Dynamic Column Widths based on content

Question

I am working on an HTML file that I will use as both an attachment to an email and the basis for an HTML based email message that has a table with 13 columns.

I would like to have the columns auto size based on the contents so that columns with shorter headings and values do not take up as much space as longer valued columns. Right now I am seeing that all the columns are evenly sized.

Here is my current CSS and table code snippets

     /* What it does: Stops Outlook from adding extra spacing to tables. */
     table, td {
         mso-table-lspace: 0pt !important;
         mso-table-rspace: 0pt !important;
     }
 
     /* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
     table {
         border-spacing: 0 !important;
         border-collapse: collapse !important;
         table-layout: fixed !important;
         margin: 0 auto !important;
     }
 
     table table table {
         table-layout: auto;
     }

<table width="100%" border="1" style="font-size:10pt;table-layout: fixed;">
       <thead style="background-color:#10163C;color:#FFFFFF">
         <tr>
            <th>Semester</th>
            <th>Evaluation End Date<br/>(11:59 PM)</th>
            <th>Days<br/>Remaining</th>
            <th>Subject</th>
            <th>Catalog</th>
            <th>Section</th>
            <th>Course Name</th>
            <th>Level</th>
            <th>Trait</th>
            <th>Instructor</th>
            <th>Responses</th>
            <th>Enrollment</th>
            <th>Response<br/>Rate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Fall 2020</td>
            <td>December 9, 2020</td>
            <td>5</td>
            <td>SUBJ</td>
            <td>1234</td>
            <td>MWE</td>
            <td>Class_Long NAme Goes Here</td>
            <td>UGRD</td>
            <td>Online</td>
            <td>Y Teacher</td>
            <td>0</td>
            <td>0</td>
            <td>0.00%</td>
        </tr>
    </tbody>

In the example the Semester, Days Remaining, Subject, Catalog, Section, Level, Trait, Responses, Enrollment, Response Rate columns should be narrower as they have short values.

While the Evaluation End Date and Course Name should be wider as their values are longer.

One limitation is that I cannot use JavaScript/JQuery as I am using email to send these out.

Aib Syed · Accepted Answer · 2020-12-04 18:34:53Z

1

Here is one way.

You can apply a min-width on the th and set the width to 100% like this:

th {
  width: 100%;
  min-width: 125px;
}

Additionally, I removed the fixed layout specification because it was preventing some styles from being applied to the table.

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,
td {
  mso-table-lspace: 0pt !important;
  mso-table-rspace: 0pt !important;
}


/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */

table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
  margin: 0 auto !important;
}

th,
td {
  text-align: left;
}

th {
  width: 100%;
  min-width: 125px;
}

<div>
  <table border="1" style="font-size:10pt;">
    <thead style="background-color:#10163C;color:#FFFFFF">
      <tr style="background-color:#10163C;color:#FFFFFF">
        <th>Semester</th>
        <th>Evaluation End Date<br/>(11:59 PM)</th>
        <th>Days<br/>Remaining</th>
        <th>Subject</th>
        <th>Catalog</th>
        <th>Section</th>
        <th>Course Name</th>
        <th>Level</th>
        <th>Trait</th>
        <th>Instructor</th>
        <th>Responses</th>
        <th>Enrollment</th>
        <th>Response<br/>Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fall 2020</td>
        <td>December 9, 2020</td>
        <td>5</td>
        <td>SUBJ</td>
        <td>1234</td>
        <td>MWE</td>
        <td>Class_Long NAme Goes Here</td>
        <td>UGRD</td>
        <td>Online</td>
        <td>Y Teacher</td>
        <td>0</td>
        <td>0</td>
        <td>0.00%</td>
      </tr>
    </tbody>
  </table>
</div>

Here is another solution if you don't want to set widths:

/* What it does: Stops Outlook from adding extra spacing to tables. */

table,
td {
  mso-table-lspace: 0pt !important;
  mso-table-rspace: 0pt !important;
}


/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */

table {
  border-spacing: 0 !important;
  border-collapse: collapse !important;
  width: 100%;
  margin: 0 auto !important;
}

th,
td {
  text-align: left;
}

th {
  word-wrap: break-word;
}

<div>
  <table border="1" style="font-size:10pt;">
    <thead style="background-color:#10163C;color:#FFFFFF">
      <tr style="background-color:#10163C;color:#FFFFFF">
        <th>Semester</th>
        <th>Evaluation End Date<br/>(11:59 PM)</th>
        <th>Days<br/>Remaining</th>
        <th>Subject</th>
        <th>Catalog</th>
        <th>Section</th>
        <th>Course Name</th>
        <th>Level</th>
        <th>Trait</th>
        <th>Instructor</th>
        <th>Responses</th>
        <th>Enrollment</th>
        <th>Response<br/>Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Fall 2020</td>
        <td>December 9, 2020</td>
        <td>5</td>
        <td>SUBJ</td>
        <td>1234</td>
        <td>MWE</td>
        <td>Class_Long NAme Goes Here</td>
        <td>UGRD</td>
        <td>Online</td>
        <td>Y Teacher</td>
        <td>0</td>
        <td>0</td>
        <td>0.00%</td>
      </tr>
    </tbody>
  </table>
</div>

All I did was add word-wrap: break-word; to the th element.

edited Dec 4, 2020 at 18:34

answered Dec 4, 2020 at 18:07

Aib Syed

3,1942 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

psycoperl Over a year ago

When I tried your solution, the columns did not resize (except for the first column and that column only resizes bigger if I widen the window)

Aib Syed Over a year ago

Did you run the snippet above?

psycoperl Over a year ago

Yes and even in the code snippet it only resizes the first column.

Aib Syed Over a year ago

Also included an alternate solution below my original answer. You can add word-wrap: break-word; to the th element.

psycoperl Over a year ago

Still no change. I even reduced the number of columns and it did not change.

|

Collectives™ on Stack Overflow

HTML Table Formatting - Dynamic Column Widths based on content

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related