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

时间：2021-03-21 19:41:50

标签： javascript html css dynamic html-table

使用 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，您可以看到：

  1. 两个表格的宽度不同
  2. 两个表中的列具有不同的宽度

所以我的目标是：

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

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

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

enter image description here

意思是，仅举几例：

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

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

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

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

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

1 个答案:

答案 0 :(得分：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>

相关问题
最新问题