In HTML, adjust column widths for multiple tables according to the widest column present in any of them

Question

In HTML, adjust column widths for multiple tables according to the widest column present in any of them

With Python, I am creating an HTML page that contains multiple tables with the same number of columns, all holding the same type of data. While the generated page is functional, I would like to improve readability by ensuring that all tables have the same width. Currently, each table either has a different width or experiences text overflow in the columns.

To address this issue, I have added custom CSS styles to set fixed widths for each column in the tables. However, manually setting these widths for each column is not a scalable solution.

I am now looking for a dynamic solution to ensure that all tables have consistent column widths based on the widest column found across any of the tables. This would involve setting the width of columns like "Test Case Name" and "Owner" to match the widest instance of those columns among all tables.

If you look at the provided example, you will notice discrepancies in the widths of the tables and their respective columns. My objective is to create a script, potentially using JavaScript, that calculates the appropriate column widths dynamically instead of statically defining them in the CSS.

I have attempted to implement some solutions found online but have not achieved the desired result due to the complexity of my table structure. Any assistance or guidance on how to achieve this dynamic column sizing would be greatly appreciated. Thank you.

javascript html css dynamic html-table

Answer 1

Answer №1

I utilized jQuery to adjust the column widths of two tables.

$('#table2 th').each(function(idx) {
  var w1 = $('#table1 thead tr').children("th:eq(" + idx + ")").width();
  var w2 = $(this).width();
  if (w1 > w2)
    $(this).css("min-width", w1 + "px");
  else if (w2 > w1)
    $('#table1 thead tr').children("th:eq(" + idx + ")").css("min-width", w2 + "px");
});

table {
  table-layout: fixed;
  margin-bottom: 2em;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}

table th {
  padding: .2em 1em;
  background-color: #eee;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

table td {
  padding: .2em 1em;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  vertical-align: top;
}

table th:nth-child(1) {
  min-width: 100px;
}

table th:nth-child(2) {
  min-width: 250px;
}

table th:nth-child(3) {
  min-width: 100px;
}

table th:nth-child(4) {
  min-width: 100px;
}

table th:nth-child(5) {
  min-width: 250px;
}

table th:nth-child(6) {
  min-width: 100px;
}

table th:nth-child(7) {
  min-width: 100px;
}

table th:nth-child(8) {
  min-width: 100px;
}

table th:nth-child(9) {
  min-width: 100px;
}

table th:nth-child(10) {
  min-width: 100px;
}

table td {
  text-align: left;
  word-wrap: break-word;
}

code {
  white-space: pre-wrap;
}

span.smallcaps {
  font-variant: small-caps;
}

span.underline {
  text-decoration: underline;
}

div.column {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}

div.hanging-indent {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

ul.task-list {
  list-style: none;
}

<h1 id="suite-test-cases">Suite test cases</h1>
<table id="table1">
  <thead>
    <tr class="header">
      <th>Test Case</th>
      <th>Test Case<br>Name</th>
      <th>Owner</th>
      <th>State</th>
      <th>Test Case<br>Description</th>
      <th>Design</th>
      <th>Preconditions</th>
      <th>Depends on</th>
      <th>Dependencies</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>ID.PFIBD1</td>
      <td>Fill in billing details</td>
      <td></td>
      <td>Done</td>
      <td>Log into application with user without paid subscription and create new subscription</td>
      <td>1. Log In (more in ID.CCU1)<br>2. Assert visibility of non active subscription pop-up<br>3. Enter ...
      <td></td>
      <td>ID.CCU1</td>
      <td>1. ID.PUBI1<br>2. ID.PDBI1<br>3. ID.PFIBD4</td>
      <td></td>
    </tr>
  </tbody>
</table>
<h1 id="suite-test-cases-1">Suite test cases</h1>
<table id="table2">
  <thead>
    <tr class="header">
      <th>Test Case</th>
      <th>Test Case<br>Name</th>
      <th>Owner</th>
      <th>State</th>
      <th>Test Case<br>Description</th>
      <th>Design</th>
      <th>Preconditions</th>
      <th>Depends on</th>
      <th>Dependencies</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>ID.CCU2</td>
      <td>Create User</td>
      <td></td>
      <td>WIP</td>
      <td>Create single unique user</td>
      <td>1. Goto settings screen<br>2. Wait until all elements visible<br>3. Enter newly generated email into the Create User field<br>4. Wait for aside menu to be visible<br>5. Fill in all the&... 
      <td></td>
      <td>ID.CCU1</td>
      <td>1. ID.DDU1<br>2. ID.UUU1<br>3. ID.UUU2</td>
      <td></td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

I utilized jQuery to adjust the column widths of two tables.

$('#table2 th').each(function(idx) {
  var w1 = $('#table1 thead tr').children("th:eq(" + idx + ")").width();
  var w2 = $(this).width();
  if (w1 > w2)
    $(this).css("min-width", w1 + "px");
  else if (w2 > w1)
    $('#table1 thead tr').children("th:eq(" + idx + ")").css("min-width", w2 + "px");
});

table {
  table-layout: fixed;
  margin-bottom: 2em;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-spacing: 0;
  border-collapse: collapse;
}

table th {
  padding: .2em 1em;
  background-color: #eee;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
}

table td {
  padding: .2em 1em;
  border-top: 1px solid #ddd;
  border-left: 1px solid #ddd;
  vertical-align: top;
}

table th:nth-child(1) {
  min-width: 100px;
}

table th:nth-child(2) {
  min-width: 250px;
}

table th:nth-child(3) {
  min-width: 100px;
}

table th:nth-child(4) {
  min-width: 100px;
}

table th:nth-child(5) {
  min-width: 250px;
}

table th:nth-child(6) {
  min-width: 100px;
}

table th:nth-child(7) {
  min-width: 100px;
}

table th:nth-child(8) {
  min-width: 100px;
}

table th:nth-child(9) {
  min-width: 100px;
}

table th:nth-child(10) {
  min-width: 100px;
}

table td {
  text-align: left;
  word-wrap: break-word;
}

code {
  white-space: pre-wrap;
}

span.smallcaps {
  font-variant: small-caps;
}

span.underline {
  text-decoration: underline;
}

div.column {
  display: inline-block;
  vertical-align: top;
  width: 50%;
}

div.hanging-indent {
  margin-left: 1.5em;
  text-indent: -1.5em;
}

ul.task-list {
  list-style: none;
}

<h1 id="suite-test-cases">Suite test cases</h1>
<table id="table1">
  <thead>
    <tr class="header">
      <th>Test Case</th>
      <th>Test Case<br>Name</th>
      <th>Owner</th>
      <th>State</th>
      <th>Test Case<br>Description</th>
      <th>Design</th>
      <th>Preconditions</th>
      <th>Depends on</th>
      <th>Dependencies</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>ID.PFIBD1</td>
      <td>Fill in billing details</td>
      <td></td>
      <td>Done</td>
      <td>Log into application with user without paid subscription and create new subscription</td>
      <td>1. Log In (more in ID.CCU1)<br>2. Assert visibility of non active subscription pop-up<br>3. Enter ...
      <td></td>
      <td>ID.CCU1</td>
      <td>1. ID.PUBI1<br>2. ID.PDBI1<br>3. ID.PFIBD4</td>
      <td></td>
    </tr>
  </tbody>
</table>
<h1 id="suite-test-cases-1">Suite test cases</h1>
<table id="table2">
  <thead>
    <tr class="header">
      <th>Test Case</th>
      <th>Test Case<br>Name</th>
      <th>Owner</th>
      <th>State</th>
      <th>Test Case<br>Description</th>
      <th>Design</th>
      <th>Preconditions</th>
      <th>Depends on</th>
      <th>Dependencies</th>
      <th>Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>ID.CCU2</td>
      <td>Create User</td>
      <td></td>
      <td>WIP</td>
      <td>Create single unique user</td>
      <td>1. Goto settings screen<br>2. Wait until all elements visible<br>3. Enter newly generated email into the Create User field<br>4. Wait for aside menu to be visible<br>5. Fill in all the&... 
      <td></td>
      <td>ID.CCU1</td>
      <td>1. ID.DDU1<br>2. ID.UUU1<br>3. ID.UUU2</td>
      <td></td>
    </tr>
  </tbody>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

In HTML, adjust column widths for multiple tables according to the widest column present in any of them

Answer №1

Similar questions

What is the process for updating a database using a web browser in Django?

Merge two JavaScript functions

Explaining the jQuery $.post method

Progress Circles on Canvas in FireFox

Inserting a new key-value pair into each object within an array

Can you nest an if statement within another if statement within a return statement?

HTML block failing to implement Bootstrap styling

Tips for stopping Vue.js automatic merging of CSS classes

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

Tips for updating state in response to changes in props

Eliminate Tracking Parameters from URL

I'm looking for a way to track the progress of an ajax call. Specifically, I want to know how I

Accessing Row Data from a Material Table using a Button Click, Not through Row Selection

When an input value changes in jQuery, the script attempts to locate the parent element and then find the next input. However, in some cases, the value returned

Place the image on the canvas and adjust its shape to a circle

Anomaly observed in the deconstruction of Material UI table components

I have been working on creating a hangman game, and although I have figured out the logic behind it, I am experiencing an issue where it is not functioning properly. After inspect

Tips for initiating and terminating the evaluation of a condition at regular intervals using JavaScript

Guide to using the Firefox WebExtensions API to make AJAX requests to the website of the current tab

Utilize jQuery method in HTML to perform parsing operation