如何解决HTML,根据这些表中最宽的列设置多个表的列宽
使用 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,您可以看到:
- 两个表格的宽度不同
- 两个表中的列具有不同的宽度
所以我的目标是:
所有表格中所有列的宽度应该由这些表格中最宽的列决定,例如测试用例名称列应该继承 第一个表中测试用例名称列的宽度。
所以它可能看起来像这样:
意思是,仅举几例:
请注意,最宽的列可以在任何表中,因此我正在寻找动态解决方案。
我最初考虑在 CSS 中手动设置宽度,因此是 table th:nth-child(1) { width: 100px !important; }
部分,但我很快意识到这是不可扩展的。
我相信我需要一些 javascript 来解决这个问题,不幸的是我不知道从哪里开始。我尝试复制我在互联网上找到的一些示例,但不幸的是这些都不起作用,我想是因为我的桌子更宽。
你能帮我解决这个问题吗?谢谢
解决方法
我用 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。