Правильная ширина Выравнивание дочерней таблицы внутри родительской таблицы в HTML - PullRequest
Новая
       13

Правильная ширина Выравнивание дочерней таблицы внутри родительской таблицы в HTML

0 голосов
/ 22 ноября 2018

Я создал разборную вложенную таблицу 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 столбцах. Как я могу этого добиться?Я пытался, но в итоге только почесал голову.

Заранее спасибо !!

[Вывод с этим текущим кодом] 1

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Вот вы: 

$(".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>
0 голосов
/ 22 ноября 2018

https://jsfiddle.net/g4Lo92zb/

Я изменил ваш HTML и JS.

Вы можете свернуть строку, которая использует меньше кода и выглядит более аккуратно.

Убедитесь, что когдаВы устанавливаете свойство стиля отображения для своего элемента, чтобы установить для него действительное значение свойства отображения.

table display: table;

tr display: table-row;

td display: table-cell;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...