HTML，根据这些表中的最宽列设置多个表的列宽答案

【问题标题】：HTML, set column width for multiple tables based on the widest column in any of these tablesHTML，根据这些表中的最宽列设置多个表的列宽
【发布时间】：2021-06-18 13:12:15
【问题描述】：

使用 python，我正在生成一个包含多个表的 html 页面，这些表都具有相同数量的列。此外，所有这些列都包含相同类型的数据。

我生成的页面没问题，但我想通过使所有表格的宽度相同来提高易读性，目前每个表格的宽度不同，或者文本溢出列。

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) { width: 100px !important; }
  table th:nth-child(2) { width: 250px !important; }
  table th:nth-child(3) { width: 100px !important; }
  table th:nth-child(4) { width: 100px !important; }
  table th:nth-child(5) { width: 250px !important; }
  table th:nth-child(6) { width: 100px !important; }
  table th:nth-child(7) { width: 100px !important; }
  table th:nth-child(8) { width: 100px !important; }
  table th:nth-child(9) { width: 100px !important; }
  table th:nth-child(10) { width: 100px !important; }

  table td:nth-child(1) { width: 100px !important; }
  table td:nth-child(2) { width: 250px !important; }
  table td:nth-child(3) { width: 100px !important; }
  table td:nth-child(4) { width: 100px !important; }
  table td:nth-child(5) { width: 250px !important; }
  table td:nth-child(6) { width: 100px !important; }
  table td:nth-child(7) { width: 100px !important; }
  table td:nth-child(8) { width: 100px !important; }
  table td:nth-child(9) { width: 100px !important; }
  table td:nth-child(10) { width: 100px !important; }

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
  <meta charset="utf-8" />
  <meta name="generator" content="pandoc" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
  <title>Navigation</title>
  <style>
    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;}
  </style>
  <link rel="stylesheet" href="template.css" />
</head>
<body>
<h1 id="suite-test-cases">Suite test cases</h1>
<table>
<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 the billing details<br>4. Await the successfull message confirmation</td>
<td>1. Site must be up<br>2. Test user must exist<br>3. Test user must not have active subscription</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>
<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 fields in aside menu<br>6. Create an user<br>7. Check Create User Action was successful</td>
<td>1. Site must be up<br>2. Test user has to have privileges to create a role<br>3. To be created test user must not exist</td>
<td>ID.CCU1</td>
<td>1. ID.DDU1<br>2. ID.UUU1<br>3. ID.UUU2</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

如果你运行 MWE，你会看到：

两张桌子的宽度不同
两个表中的列宽度不同

所以我的目标是：

使表格宽度相同（可以比页面宽度更宽，因为我不想破坏列表中的文本）
使所有列的类型相同，例如，测试用例名称（第二列）所有表的宽度相同（我现在有大约 10 个这样的表，我想保留它们分开）

所有表中所有列的宽度应由这些表中的最宽列确定，例如，测试用例名称列应继承第一个表中测试用例名称列的宽度。

所以它可能看起来像这样：

意思是，仅举几例：

所有表的测试用例名称（第二列）宽度由first表设置
所有表格的所有者（第三列）宽度由第二个表格设置
所有表的测试用例描述（第五列）宽度由第一个表设置

请注意，最宽的列可以在任何表中，所以我正在寻找动态解决方案。

我最初考虑在 CSS 中手动设置宽度，因此是 table th:nth-child(1) { width: 100px !important; } 部分，但我很快意识到这是不可扩展的。

我相信我需要一些 javascript 来解决这个问题，不幸的是我不知道从哪里开始。我尝试复制我在互联网上找到的一些示例，但不幸的是这些都不起作用，我想是因为我的桌子更宽了。

你能帮我解决这个问题吗？谢谢

【问题讨论】：

标签： javascript html css dynamic html-table

【解决方案1】：

我用jQuery调整了两个表的列。

$('#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 the billing details<br>4. Await the successfull message confirmation</td>
      <td>1. Site must be up<br>2. Test user must exist<br>3. Test user must not have active subscription</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 fields in aside menu<br>6. Create an user<br>7. Check Create User Action was successful</td>
      <td>1. Site must be up<br>2. Test user has to have privileges to create a role<br>3. To be created test user must not exist</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>

【讨论】：

嗨@meysam asadi，谢谢，我自己尝试这个时也得到了类似的结果，不幸的是我不能使用这个，因为我不希望线路中断，因为我在那里有列表，其中为了清楚起见，我想将单个项目保留在同一行。我意识到也许从用户体验的角度来看，拥有如此宽的表格并不理想，但在这种情况下，我真的不想将项目分成多行。
我修改了代码。根据你想要的。我用 jQuery 做到了这一点。
谢谢@meysam asadi，最后我通过稍微修改你的答案来完成我想要的。我使用一个数组来查找每列的最高值，然后将该值应用于所有相应的列，再次感谢您的帮助。