Fatal编程技术网
  • html/
  • HTML中父表内部子表的正确宽度对齐

HTML中父表内部子表的正确宽度对齐

html css

HTML中父表内部子表的正确宽度对齐,html,css,nested,Html,Css,Nested,我已经创建了一个可折叠的HTML嵌套表。 但是，经过这么多徒劳的努力，我无法设置适当的宽度。 我的子表不适合父表的头部 以下是代码片段： 代码： HTML $（'.content'）.css（'display'，'none'）； $（“.collapsable”）。单击（函数（）{ id=$（this.attr（'id'）； num=id.split（“”）.pop（）； //document.getElementById（“mytable_u3;”+num）.classList.toggl

我已经创建了一个可折叠的HTML嵌套表。 但是，经过这么多徒劳的努力，我无法设置适当的宽度。 我的子表不适合父表的头部

以下是代码片段：

代码： HTML


$（'.content'）.css（'display'，'none'）；
$（“.collapsable”）。单击（函数（）{
id=$（this.attr（'id'）；
num=id.split（“”）.pop（）；
//document.getElementById（“mytable_u3;”+num）.classList.toggle（“show”）；
if（document.getElementById（“mytable_216;”+num）.style.display=='none'）{
document.getElementById（“mytable_u3;”+num）.style.display='block'；
}
否则{
document.getElementById（“mytable_”+num）.style.display='none'
}
console.log（num）；
log（document.getElementById（“mytable_u3;”+num）.innerHTML）；
表{边框折叠：折叠；表布局：固定；宽度：310px；}
表td{border:solid 1px#fab；宽度：100px；换行符：break word；}
/*设置用于打开和关闭可折叠内容的按钮的样式*/
.可折叠{
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
.活动，.可折叠：悬停{
背景色：#ccc；
}
/*设置可折叠内容的样式。注意：默认情况下隐藏*/
.内容{
填充：0 18px；
显示：无；
溢出：隐藏；
背景色：#f1f1；
}
S.noCommandFailure原因受案例影响的响应
1建筑模型
机器错误、其他信息、警告、模式
2构建测试模式
其他信息、覆盖率、风险敞口CCR
核心、测试用例错误、关键错误、机器错误、模式变量、覆盖率变量修复测试用例
3共同试验
机器错误，警告重新运行
4创建逻辑测试
核心，其他信息，覆盖率
核心、严重错误、机器错误、其他信息、警告、严重、模式变量、覆盖率变量重新运行
5诊断故障
测试用例错误、关键错误、模式变量、覆盖率变量重新运行
6验证\u测试\u结构
测试用例错误、机器错误、其他信息、警告、严重、覆盖率风险开放CCR
7写入切换程序
核心修复测试用例
PS：您也可以使用我在文章中给出的JSFIDLE链接。 可折叠HTML表在实际中工作，但在JSFIDLE站点中不工作

但是我只想在css的情况下得到帮助，也就是说，我想正确地设置最后3列中的子表。我如何才能做到这一点？ 我试过了，但结果只是挠头

提前谢谢

我改变了你的HTML和JS

您可以折叠使用更少代码的行，使其看起来更整洁

确保在元素上设置“显示样式”特性时，将其设置为有效的“显示特性”值

表
显示：表；

tr
显示：表格行；

td
显示：表格单元格；

我改变了你的HTML和JS

您可以折叠使用更少代码的行，使其看起来更整洁

确保在元素上设置“显示样式”特性时，将其设置为有效的“显示特性”值

表
显示：表；

tr
显示：表格行；

td
显示：表格单元格；

给您：

$（“.collapsable”）。单击（函数（）{
$（this.next（'tr'）.toggle（）；
})；
表格{
边界塌陷：塌陷；
表布局：固定；
宽度：80%；
保证金：0自动；
}
th{
边框：实心1px；
}
表td{
边框：实心1px#fab；
宽度：100px；
单词包装：打断单词；
}
餐桌{
宽度：100%；
}
/*设置用于打开和关闭可折叠内容的按钮的样式*/
.可折叠{
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
}
.可折叠+tr:非（：第n个子项（2））{
显示：无
}
/*如果单击按钮（使用JS添加.active类），并将鼠标移到按钮上（悬停），则为按钮添加背景色*/
.主动，
.可折叠：悬停{
背景色：#cc

<head>
<script>
$('.content').css('display','none');
    $( ".collapsible" ).click(function() {
         id = $(this).attr('id');
         num = id.split("_").pop();
        // document.getElementById("mytable_"+num).classList.toggle("show");
          if(document.getElementById("mytable_"+num).style.display=='none') {
              document.getElementById("mytable_"+num).style.display= 'block';
          }
          else {
              document.getElementById("mytable_"+num).style.display= 'none'
          }
         console.log(num);
         console.log(document.getElementById("mytable_"+num).innerHTML);
</script>
  <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
    /* Style the button that is used to open and close the collapsible content */
.collapsible {
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #ccc;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}
</style>
</head>
<body>
      <table style='width:80%;margin:0 auto;' border='1' bordercolor='BLACK'>               
        <thead >                                                                             
         <tr class='w3-cyan'><th>S.no</th><th>Command</th><th>Failure Reasons</th><th>Testcase Affected</th><th>Response</th></tr></thead>
<tr id='myBtn_1' class='collapsible'><td>1</td><td colspan=4>build_model</td></tr>                                                        
<tr >                                                                                                                                     
<td colspan=1></td><td colspan=1></td>                                                                                                    
<td  id='mytable_1' class='content' colspan=3><table>                                                                                     
<tr><td>MACHINE_ERROR,OTHER_INFO,WARNINGS,PATTERN_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_model-MACHINE_ERROR-OTHER_INFO-WARNINGS-PATTERN_VAR'>1</a></td><td> Regold</td></tr>                                                       
</table></td></tr>                                                                                                                          
<tr id='myBtn_2' class='collapsible'><td>2</td><td colspan=4>build_testmode</td></tr>                                                       
<tr >                                                                                                                                       
<td colspan=1></td><td colspan=1></td>                                                                                                      
<td  id='mytable_2' class='content' colspan=3><table>                                                                                       
<tr><td>OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>                                                                                              
<tr><td>CORE,TESTCASE_ERRORS,CRITICAL_ERRORS,MACHINE_ERROR,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/build_testmode-CORE-TESTCASE_ERRORS-CRITICAL_ERRORS-MACHINE_ERROR-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Fix Testcase</td></tr>                                                                                                                              
</table></td></tr>                                                                                                                          
<tr id='myBtn_3' class='collapsible'><td>3</td><td colspan=4>commit_tests</td></tr>                                                         
<tr >                                                                                                                                       
<td colspan=1></td><td colspan=1></td>                                                                                                      
<td  id='mytable_3' class='content' colspan=3><table>                                                                                       
<tr><td>MACHINE_ERROR,WARNINGS</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/commit_tests-MACHINE_ERROR-WARNINGS'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_4' class='collapsible'><td>4</td><td colspan=4>create_logic_tests</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td  id='mytable_4' class='content' colspan=3><table>
<tr><td>CORE,OTHER_INFO,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-OTHER_INFO-COVERAGE_VAR'>1</a></td><td> Regold</td></tr>
<tr><td>CORE,CRITICAL_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/create_logic_tests-CORE-CRITICAL_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_5' class='collapsible'><td>5</td><td colspan=4>diagnose_failures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td  id='mytable_5' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,CRITICAL_ERRORS,PATTERN_VAR,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/diagnose_failures-TESTCASE_ERRORS-CRITICAL_ERRORS-PATTERN_VAR-COVERAGE_VAR'>1</a></td><td> Rerun</td></tr>
</table></td></tr>
<tr id='myBtn_6' class='collapsible'><td>6</td><td colspan=4>verify_test_structures</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td  id='mytable_6' class='content' colspan=3><table>
<tr><td>TESTCASE_ERRORS,MACHINE_ERROR,OTHER_INFO,WARNINGS,SEVERE,COVERAGE_VAR</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/verify_test_structures-TESTCASE_ERRORS-MACHINE_ERROR-OTHER_INFO-WARNINGS-SEVERE-COVERAGE_VAR'>1</a></td><td> Open CCR</td></tr>
</table></td></tr>
<tr id='myBtn_7' class='collapsible'><td>7</td><td colspan=4>write_toggle_gram</td></tr>
<tr >
<td colspan=1></td><td colspan=1></td>
<td  id='mytable_7' class='content' colspan=3><table>
<tr><td>CORE</td><td><a href='http://etpv/servers/scratch05/gpreeti/python/practice/tc_files1/write_toggle_gram-CORE'>1</a></td><td> Fix Testcase</td></tr>
</table></td></tr>
</table>  
</body>