How to make a bootstrap Collapse in html tables?

Navigation
2

I would like to get this effect toggle bootstrap in a table, that is to say: get that effect of displacement up, but all I get is that it appears and disappears with a horrible effect.

I leave you a bit of code: 

$(function () {
    $('.btn_show').click(function (ev) {
            $('#contenido').slideToggle("slow");

    });
})
.input-sm{
        height: 20px;
        font-size: 9pt;
        width: 100%;
    }
    .letra{
        font-size: 9pt;
    }
    table {
        border-collapse: collapse;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
    }

    tr {
        border-bottom: 1px solid #000;
    }
    input:[type=text]{
        border-bottom: 1px solid #C00;
        border: 0;
        outline: none; 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="100%">
            <thead style="background:#000;text-align:center;">
                <tr>
                    <td colspan="4">
                        <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
                    </td>
                </tr>
            </thead>
            <tbody id="contenido" style="display:none">
                <tr>
                    <th> 
                    Peso RN:
                    </th>
                    <td>
                        <input type="text" class="input-sm">
                    </td>
                    <th>Parto:</th>
                    <td>
                        <input type="text" class="input-sm">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Obs. Perinatales
                    </td>
                    <td colspan="2">
                        <input type="text" class="input-sm">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        Obs. Perinatales
                    </td>
                    <td colspan="2">
                        <input type="text" class="input-sm">
                    </td>
                </tr>
            </tbody>
                
        </table>
  

How to get that scrolling effect in an html table?

    
asked by Shassain 05.10.2018 в 19:27
source

3 answers

3

You must add two more options to your CSS , apply a display:block to the element tbody , when doing this process, it will be necessary to modify the width of the rows tr and tbody (otherwise would be misaligned) , this is achieved with display:table;width:100%;

Also use the ev.preventDefault(); when performing the click on a link and it will not perform the re address. ;)

Ejm 

$(function () {
    $('.btn_show').click(function (ev) {
    	ev.preventDefault();
        $('#contenido').slideToggle("slow");
    });
})
.input-sm{
        height: 20px;
        font-size: 9pt;
        width: 100%;
    }
    .letra{
        font-size: 9pt;
    }
    
    table {
        border-collapse: collapse;
        border-left: 1px solid #000;
        border-right: 1px solid #000;
        width: 100%;
    }
    tbody {
        display:block;
    }
    thead, tbody tr {
        display:table;
        width:100%;
    }
    tr {
        border-bottom: 1px solid #000;
    }
    input:[type=text]{
        border-bottom: 1px solid #C00;
        border: 0;
        outline: none; 
    } 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
    <thead style="background:#000;text-align:center;">
        <tr>
            <td colspan="4">
                <a class="btn_show" href="#!" 
                style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
            </td>
        </tr>
    </thead> 
    
    <tbody id="contenido" style="display: none;" >
        <tr>
            <td> 
            Peso RN:
            </td>
            <td>
                <input type="text" class="input-sm">
            </td>
            <td>Parto:</td>
            <td>
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Obs. Perinatales
            </td>
            <td colspan="2">
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Obs. Perinatales
            </td>
            <td colspan="2">
                <input type="text" class="input-sm">
            </td>
        </tr>
    </tbody>
</table>
    
answered by 05.10.2018 / 20:34
source
2

Change the display: none of <tbody> by display: block in that way what you're looking for is fulfilled 

$(function() {
  $('.btn_show').click(function(ev) {
    $('#contenido').slideToggle("slow");

  });
})
.input-sm {
  height: 20px;
  font-size: 9pt;
  width: 100%;
}

.letra {
  font-size: 9pt;
}

table {
  border-collapse: collapse;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  width: 100%;
}

tr {
  border-bottom: 1px solid #000;
}

input:[type=text] {
  border-bottom: 1px solid #C00;
  border: 0;
  outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="100%">
  <thead style="background:#000;text-align:center;">
    <tr>
      <td colspan="4">
        <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
      </td>
    </tr>
  </thead>
  <tbody id="contenido" style="display:block">
    <tr>
      <th>
        Peso RN:
      </th>
      <td>
        <input type="text" class="input-sm">
      </td>
      <th>Parto:</th>
      <td>
        <input type="text" class="input-sm">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Obs. Perinatales
      </td>
      <td colspan="2">
        <input type="text" class="input-sm">
      </td>
    </tr>
    <tr>
      <td colspan="2">
        Obs. Perinatales
      </td>
      <td colspan="2">
        <input type="text" class="input-sm">
      </td>
    </tr>
  </tbody>

</table>
    
answered by 05.10.2018 в 20:32
0

I wrote the previous answer wrong, this should work 

    <table width="100%">
        <thead style="background:#000;text-align:center;">
            <tr>
                <td colspan="4">
                    <a class="btn_show" href="#!" style="color:#fff; font-size:12px"><strong>C.- Antecedentes</strong></a>
                </td>
            </tr>
        </thead>    
</table>
    <div id="contenido" style="display: block;">
    <table style="display: table;">
        <tbody style="">
            <tr>
                <th> 
                Peso RN:
                </th>
                <td>
                    <input type="text" class="input-sm">
                </td>
                <th>Parto:</th>
                <td>
                    <input type="text" class="input-sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Obs. Perinatales
                </td>
                <td colspan="2">
                    <input type="text" class="input-sm">
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    Obs. Perinatales
                </td>
                <td colspan="2">
                    <input type="text" class="input-sm">
                </td>
            </tr>
        </tbody>

    </table>

    
answered by 05.10.2018 в 21:05
Open modal with Jquery with double click Error trying to install "ngx-input-file" in Angular 6