Html Table - Set Maximum width of a column without CSS

Question

Need to Set 'maximum with' of 'Description' column in html table as an percentage. When I tried with 'width' , It will take 30% for the 'Description' column , when the length of description is less than 30% as well. So need to set 'max-width' not the 'width' . But following piece of code is not working. Can you please help me.

 <table style='font-family: Arial; font-size: 14px;' border='0' cellpadding='5'>
  <tbody>
    <tr>
      <th align='left'>Number</th>
      <th align='left' max-width='30%'>Description</th>
      <th align='left'>Company</th>
      <th align='left'>Next Number</th>
      <th align='left'>Name</th>
    </tr>
    <tr>
      <td>123456</td>
      <td>Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width </td>
      <td>ABCDE</td>
      <td>123456</td>
      <td>ABCDE</td>
    </tr>
  </tbody>
</table>

possible duplicate of https://stackoverflow.com/questions/8465385/how-can-i-set-the-max-width-of-a-table-cell-using-percentages — Shiv Kumar Baghel, Sep 21 '18 at 03:36
Possible duplicate of [How can I set the max-width of a table cell using percentages?](https://stackoverflow.com/questions/8465385/how-can-i-set-the-max-width-of-a-table-cell-using-percentages) — Déjà vu, Sep 21 '18 at 03:38

score 1 · Answer 1 · answered Sep 21 '18 at 04:21

This works for me: you need to set width:100% to table and min-width to description column.

 <table style='font-family: Arial; font-size: 14px; width:100%;' border='0' cellpadding='5'>
      <tbody>
        <tr>
          <th align='left'>Number</th>
          <th align='left' style="max-width:30%; min-width:200px;">Description</th>
          <th align='left'>Company</th>
          <th align='left'>Next Number</th>
          <th align='left'>Name</th>
        </tr>
        <tr>
          <td>123456</td>
          <td>Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width </td>
          <td>ABCDE</td>
          <td>123456</td>
          <td>ABCDE</td>
        </tr>
      </tbody>
    </table>

score 1 · Answer 2 · answered Sep 21 '18 at 04:24

There's no "max-width" attribute for html tags, only a "width" attribute. Also using html attributes to define styles is no longer supported in HTML5: You should be using CCS to style your html.

Additionally, table elements can't take max-width or min-width properties at all anyway. Counter-intuitively, simply setting the width on the column will give it the behavior you want.

The following should make the max width of the description column 30%, while shrinking the column to the width of the word "Description" if there is no data present in any of the rows.

<style>
table {
  font-family: Arial;
  font-size: 14px;
  border: 0;
}
th {
  padding: 5px;
  text-align: left;
}
.description {
  width: 30%;
}
</style>

<table>
  <tbody>
    <tr>
      <th>Number</th>
      <th class="description">Description</th>
      <th>Company</th>
      <th>Next Number</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>123456</td>
      <td>Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width Testing max width </td>
      <td>ABCDE</td>
      <td>123456</td>
      <td>ABCDE</td>
    </tr>
  </tbody>
</table>

If for some reason you absolutely must use HTML attributes instead of CSS, you could do it by simply changing "max-width" in your original code to "width."

Html Table - Set Maximum width of a column without CSS

2 Answers2