表在

表在

关注
发信
关注(28)粉丝(399)

html - 子表在HTML父表中的正确宽度对齐

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

这是代码片段：
https://jsfiddle.net/preetigupta617/bpLkdx13/

码：
的HTML

<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>


PS：您也可以使用我在帖子中给出的jsfiddle链接。
    可折叠HTML表在实际中有效，但在jsfiddle站点中无效。

但是我仅在css的情况下需要帮助，即我想在后3列中正确设置子表。如何实现？
我试过了，但最后只能挠头。

提前致谢 ！！

[Output with this current code] 1

最佳答案

这个给你：



$(".collapsible").click(function() {
  $(this).next('tr').toggle();
});

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 80%;
  margin: 0 auto;
}

th {
  border: solid 1px;
}

table td {
  border: solid 1px #fab;
  width: 100px;
  word-wrap: break-word;
}

table table {
  width: 100%;
}


/* 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;
}

.collapsible+tr:not(:nth-child(2)) {
  display: none
}


/* 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;
  overflow: hidden;
  background-color: #f1f1f1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="w3-card w3-round w3-pink">
  <h1>
    <center>Regression Results</center>
  </h1>
</div>
<table>
  <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>
  <tbody>
    <tr class="collapsible">
      <td>1</td>
      <td colspan="4">build_model</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="collapsible">
      <td>2</td>
      <td colspan="4">build_testmode</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="collapsible">
      <td>3</td>
      <td colspan="4">commit_tests</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="collapsible">
      <td>4</td>
      <td colspan="4">create_logic_tests</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="collapsible">
      <td>5</td>
      <td colspan="4">diagnose_failures</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="collapsible">
      <td>6</td>
      <td colspan="4">verify_test_structures</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
    <tr class="collapsible">
      <td>7</td>
      <td colspan="4">write_toggle_gram</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td class="content" colspan="3">
        <table>
          <tbody>
            <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>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

关于html - 子表在HTML父表中的正确宽度对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53436077/

10-09 17:20
Powered by LMLPHP ©2024 表在 0.025021