4

The default html <table> element seems to set column width how I want/expect straight out of the box. The problem occurs when I try to set the entire table width to 100%, in which case each of the reasonably sized columns snap to an equal 1/n % of the total width.

Here's an example of what I'm talking about

example of width sizing

The second table looks terrible. There is absolutely no need to start wrapping text in the first column, especially when there is now more available room.

The only difference is that the second table is set to width:100%. Of course you can set exact pixel or percentage dimensions on each of the columns to scale relative to each other, but that starts hard coding some guess work as to how big each of the columns will be. In this case, columns with only View or Edit links can be sized incredibly small and don't need to take up any extra with, while some could use a little more room to grow, like Name/Type that might have other longer/shorter values.

Q: Can I somehow maintain the proportional column formating while allowing the entire table to be sized at 100% of the available width?

Demo in jsFiddle

Demo in Stack Snippets

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}
<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

2
  • mystery downvote? hey, at least there's an minimal reproducible example here and some existing debugging steps. don't see the harm in not knowing something.
    – KyleMit
    Commented Sep 15, 2017 at 21:29
  • Agree, maybe this is not the most insightful CSS question ever, but the samples are impeccable and the problem is not too obvious, I don't think table-layout is in this list of most used CSS properties. I have seem a lot of questions with less quality without any downvote. Commented Sep 15, 2017 at 22:02

3 Answers 3

7

The problem is the table-layout: fixed rule that you added to the table tag, just remove it. From w3schools:

fixed: Fixed table layout algorithm:

  • The horizontal layout only depends on the table's width and the width of the columns, not the contents of the cells
  • Allows a browser to lay out the table faster than the automatic table layout
  • The browser can begin to display the table once the first row has been received

table {
    border-collapse: collapse;
    border-spacing: 0;
    /*table-layout: fixed;*/
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}
<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2" style="width:100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

1
  • uhm, yep, that'll do it. I tried toggling that on and off in dev tools to see if it made any impact, but I'm guessing at that point it had already rendered and made up it's mind. I should have done a clean run from the start with and without it.
    – KyleMit
    Commented Sep 15, 2017 at 21:22
0

Like this?

Note: I removed the width:100% from both the tables, the CSS works best without this set!

The Code is from old SO post. Refer below.

SO Answer

CODE SNIPPET:

table {
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

table th {
  background: lightblue;
}

table th,
table td {
  border: lightgrey 1px solid;
  padding: .1em 0.2em;
}
tr td:last-child{
    width:1%;
    white-space:nowrap;
}
<h4>Width Not Set</h4>

<table id="example1">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width 100%</h4>

<table id="example2">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

















<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
  About this SO question:
  <a href='https://stackoverflow.com/q/46247387/1366033'>
        HTML Table - Maintain column width proportion when table width 100%
    </a>
</div>
https://jsfiddle.net/KyleMit/dabpc4sL/

0

Here's an attempt at a solution

Leverage the initial rendering of the table as is to establish the relative column sizes. Loop through each and set the size explicitly so they'll remain in the same proportion once the table is programmatically resized to 100%

function LockColumnWidthAndResize($table) {
    $table.find('tr th').each(function() {
      $(this).width($(this).width())
    });
    $table.width("100%");
}

Example

Pros: Doesn't require hard coding in widths of content ahead of time
Cons: Little Kludgy and has a bit of a Flash of Unstyled Content.

Demo in jsFiddle

Demo in StackSnippets

$(function() {

  LockColumnWidthAndResize($('#example2'))

  function LockColumnWidthAndResize($table) {
    $table.find('tr th').each(function() {
      $(this).width($(this).width())
    });
    $table.width("100%");
  }
  
});
table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

table th {
    background: lightblue;
}

table th, table td {
    border: lightgrey 1px solid;
    padding: .1em 0.2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h4>Width Not Set</h4>

<table id="example1" >
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>


<h4>Width - Set 100% dynamically</h4>

<table id="example2">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Start</th>
      <th>Stop</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Regular Size Name</td>
      <td>Order</td>
      <td>01/01/2017</td>
      <td>02/02/2017</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Adjustment</td>
      <td>01/01/2017</td>
      <td>04/03/2018</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Regular Size Name</td>
      <td>Adjustment</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
    <tr>
      <td>Pretty Long Name Size Actually</td>
      <td>Order</td>
      <td>08/01/2017</td>
      <td>02/02/2019</td>
      <td><a href="#View">View</a></td>
      <td><a href="#Edit">Edit</a></td>
    </tr>
  </tbody>
</table>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.