White space below bootstrap 3 Modal - html

What is this white space(marked as what in above image) below the modal-footer? Tried inspecting the element but chrome doesn't show anything. Want to remove this white space. I'm using Bootstrap 3.
website: Link
Html:
<link rel="stylesheet" href="/static/css/bootstrap_3.2.css">
<div id="shoppingModal2" class="modal in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="margin-left: 30%; overflow-x: hidden; margin-top: 3%; display: block;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Your Shopping Cart</h3>
</div>
<div class="modal-body shopping_cart_body">
<table class="table table-hover" id="shopping_table">
<thead>
<tr><td class="active">Product Image</td>
<td class="active">Id</td>
<td class="active">Size</td>
<td class="active">Price</td>
<td class="active"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;"></td>
<td class="active">2577</td>
<td class="active"><strong> 8.00in x 10.00in </strong></td>
<td class="active"> $
<span class="price_row"> 15.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;"></td>
<td class="active">2585</td>
<td class="active"><strong> 27.00in x 21.00in </strong></td>
<td class="active">
<span class="price_currency">Rs. </span>
<span class="price_row"> 4500.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active"><img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;"></td>
<td class="active">2586</td>
<td class="active"><strong> 21.00in x 21.00in </strong></td>
<td class="active">
<span class="price_currency">Rs. </span>
<span class="price_row"> 5000.00 </span></td>
<td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<span class="pull-left"> Total Price: </span> <span class="pull-left" id="total_price">Rs. 10430</span>
<button class="btn btn-primary">Proceed to Buy <i class="icon-chevron-right icon-white"></i> </button>
</div>
</div>


I think you've got something wrong with the modal script or structure. Try to re-arrange everything from the start again!
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#shoppingModal2">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="shoppingModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">Your Shopping Cart</h4>
</div>
<div class="modal-body">
<table class="table table-hover" id="shopping_table">
<thead>
<tr>
<td class="active">Product Image</td>
<td class="active">Id</td>
<td class="active">Size</td>
<td class="active">Price</td>
<td class="active"></td>
</tr>
</thead>
<tbody>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/517072d813a12d792ca84a562320d89cee307ec7a34b21f16fe96b666cf61b6c.jpg " width="60px;">
</td>
<td class="active">2577</td>
<td class="active"><strong> 8.00in x 10.00in </strong>
</td>
<td class="active">$ <span class="price_row"> 15.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2577" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/8bd665c57f537d6adbcb5e50e14c57b61e0e69e64228da42253b01dc8966b5e4.jpg " width="60px;">
</td>
<td class="active">2585</td>
<td class="active"><strong> 27.00in x 21.00in </strong>
</td>
<td class="active"> <span class="price_currency">Rs. </span>
<span class="price_row"> 4500.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2585" style="cursor:pointer;">×</td>
</tr>
<tr>
<td class="active">
<img src="/static/media/pins/pin/thumbnails/38572fea1b9c7e75928cecb1e67ff89c11bb04432d3cbfe1860a99e068304d49.jpg " width="60px;">
</td>
<td class="active">2586</td>
<td class="active"><strong> 21.00in x 21.00in </strong>
</td>
<td class="active"> <span class="price_currency">Rs. </span>
<span class="price_row"> 5000.00 </span>
</td>
<td class="active" onclick="remove_from_cart(this)" data-id="2586" style="cursor:pointer;">×</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Proceed to buy <i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
</div>
</div>
Here is a DEMO

Related

How to show or hide a table when hitting enter or clicking on search button

I have two tables in my html code and I would like to hide the table from my html page until I click enter in the search area or click on the search button. Once I click enter or hit enter on the search bar then I want my tables to appear. Right now I am unable to get it to work from the examples I have seen.
$(document).ready(function() {
//To hide the table
$("search-input").click(function() {
$("table1").hide("fast")
});
//To show the table
$("search-input").click(function() {
$("table1").show("2000")
});
//To hide the table
$("search-input").click(function() {
$("table2").hide("fast")
});
//To show the table
$("search-input").click(function() {
$("table2").show("2000")
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Search Bar-->
<div class="mb-1">
<div class="container justify-content-left">
<div class="row">
<div class="col-lg-10">
<div class="input-group mb-4"><input type="text" id="search-input" class="form-control input-text" placeholder="Enter Target Property: Street Address, City/Town, State" aria-label="Recipient's Username" aria-describedby="basic-addon2">
<span id="clickable-search-span">
<div class="input-group-append"> <button class="btn btn-primary btn-lg" type="button"><i class="fa fa-search"></i></button> </div>
</span>
</div>
</div>
</div>
</div>
<div class="comm-area">
<div id="loader-area"> </div>
</div>
</div>
<!--Search Bar End-->
!--Report Table Start -->
<div class="mb-2">
<div class="results-section">
<div class="report-wrapper">
<div class="col-auto">
<table class="table table-sm table-striped table-light" id="table1">
<tbody>
<tr>
<th class="report-header" colspan="5" style="text-align: center;">Report</th>
</tr>
<tr>
<th> Address: </th>
<td id="proposed-address"> </td>
</tr>
<tr>
<th> Latitude: </th>
<td id="proposed-lat"> </td>
</tr>
<tr>
<th> Longitude: </th>
<td id="proposed-lng"> </td>
</tr>
<tr>
<th> Rank: </th>
<td id="proposed-rank"> </td>
</tr>
<tr>
<th> Description: </th>
<td id="proposed-description"> </td>
</tr>
<tr>
<th> NHDES OneStop Website: </th>
<td id="proposed-website"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--Report Table End -->
<!-- Generator Sites Start-->
<div class="container">
<div class="row justify-content-center">
<div class="generator-wrapper text-center">
<div class="generator-list">
<table id="generator-table">
<div class="table-responsive">
<table class="table table-light table-striped" id="table2">
<tr>
<th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
</tr>
<tr>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
<th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
<th> Generator Address </th>
<th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
</tr>
<tbody id="generator-body">
</tbody>
</table>
</div>
</table>
</div>
</div>
</div>
</div>
<!--Generator Sites Table End -->

Try this (pure JavaScript, no jQuery). You will also need to add an HTML ID to the button (Here it is searchbutton)
document.getElementById("table1").style.display = ''; // Show table
document.getElementById("search-input").onkeydown = function(event){ // Handle Textbox KeyDown Events
if (event.key == 'Enter'){ // If key is Enter.
document.getElementById("table1").style.display = 'none'; // Hide Table
}
}
document.getElementById("searchbutton").onclick = function(){ // On Button Click, show table.
document.getElementById("table1").style.display = 'none'; // Hide Table
}

If I understand correctly, that's what you wanted.
function showTables() {
$("#table1").prop('hidden', false);
$("#table2").prop('hidden', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!--Search Bar-->
<div class="mb-1">
<div class="container justify-content-left">
<div class="row">
<div class="col-lg-10">
<div class="input-group mb-4"><input type="text" id="search-input" class="form-control input-text" placeholder="Enter Target Property: Street Address, City/Town, State" aria-label="Recipient's Username" aria-describedby="basic-addon2">
<span id="clickable-search-span">
<div class="input-group-append"> <button class="btn btn-primary btn-lg" type="button" onclick="showTables()"><i class="fa fa-search"></i></button> </div>
</span>
</div>
</div>
</div>
</div>
<div class="comm-area">
<div id="loader-area"> </div>
</div>
</div>
<!--Search Bar End-->
!--Report Table Start -->
<div class="mb-2">
<div class="results-section">
<div class="report-wrapper">
<div class="col-auto">
<table class="table table-sm table-striped table-light" id="table1" hidden>
<tbody>
<tr>
<th class="report-header" colspan="5" style="text-align: center;">Report</th>
</tr>
<tr>
<th> Address: </th>
<td id="proposed-address"> </td>
</tr>
<tr>
<th> Latitude: </th>
<td id="proposed-lat"> </td>
</tr>
<tr>
<th> Longitude: </th>
<td id="proposed-lng"> </td>
</tr>
<tr>
<th> Rank: </th>
<td id="proposed-rank"> </td>
</tr>
<tr>
<th> Description: </th>
<td id="proposed-description"> </td>
</tr>
<tr>
<th> NHDES OneStop Website: </th>
<td id="proposed-website"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--Report Table End -->
<!-- Generator Sites Start-->
<div class="container">
<div class="row justify-content-center">
<div class="generator-wrapper text-center">
<div class="generator-list">
<table id="generator-table">
<div class="table-responsive">
<table class="table table-light table-striped" id="table2" hidden>
<tr>
<th class="generator-header" colspan="5" style="text-align: center;">Generator Sites</th>
</tr>
<tr>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Miles) </th>
<th onclick="sortTable('generator-table', 0)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Distance (Feet) </th>
<th onclick="sortTable('generator-table', 2)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Name </th>
<th> Generator Address </th>
<th onclick="sortTable('generator-table', 4)" style="cursor: pointer;"> <i class="fa fa-fw fa-sort"></i> Generator Type(s) </th>
</tr>
<tbody id="generator-body">
</tbody>
</table>
</div>
</table>
</div>
</div>
</div>
</div>
<!--Generator Sites Table End -->

This code hides table1 onload.
When search-input is clicked, the view of table1 and table2 is toggled.
$(document).ready(function() {
$("#table1" ).hide();
$("#search-input").click(function () {
$("#table1" ).toggle();
$("#table2" ).toggle();
});
});

Semantic UI Table How to make right column to be fixed when scrolled horizontally

I am creating table that has long data in semantic ui, how to make the last column that contains action buttons remain visible (fixed position) while being scrolled? I have searched but not even satisfying solution.
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/>
<div class="ui segment" style="padding: 0px; overflow-x: scroll;"><table class="ui selectable single line compact table slide down visible transition"><thead class=""><tr class="left aligned"><th class="">Name</th><th class="">Type</th><th class="">Percent</th><th class="">Value</th><th class="">Max Value</th><th class="">Begin Date</th><th class="">Expired Date</th><th class="">Selected Product?</th><th class="">Priority</th><th class="">ezPay Available?</th><th class="">merchant Available?</th><th class="">All Merchant?</th><th class=""></th></tr></thead><tbody class=""><tr class="" style="background: rgb(255, 89, 0);"><td class="">fwfewfwe</td><td class="">Default Test</td><td class="">12</td><td class="">0</td><td class="">90000</td><td class="">2019/10/26 15:05</td><td class="">2019/10/26 15:05</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr><tr class="" style="background: rgb(255, 89, 0);"><td class="">123</td><td class="">Default Test</td><td class="">0</td><td class="">69000</td><td class="">0</td><td class="">2019/10/20 14:43</td><td class="">2019/10/21 14:43</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr><tr class="" style="background: rgb(255, 89, 0);"><td class="">grgrb egeh</td><td class="">Default Pulsa Rule Cashback</td><td class="">0</td><td class="">43545345</td><td class="">0</td><td class="">2019/10/20 14:45</td><td class="">2019/10/30 14:45</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="">1</td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class="center aligned"><i aria-hidden="true" class="times icon"></i></td><td class=""><div class="ui buttons"><button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button><button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button></div></td></tr></tbody></table></div>
Here is my code

like this?
I have just added position:sticky; and right:0;, top:0; to the ::last-child of td.
.ui.table tr td:last-child {
position: sticky;
right: 0;
top: 0;
background: #333;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<div class="ui segment" style="padding: 0px; overflow-x: scroll;">
<table class="ui selectable single line compact table slide down visible transition">
<thead class="">
<tr class="left aligned">
<th class="">Name</th>
<th class="">Type</th>
<th class="">Percent</th>
<th class="">Value</th>
<th class="">Max Value</th>
<th class="">Begin Date</th>
<th class="">Expired Date</th>
<th class="">Selected Product?</th>
<th class="">Priority</th>
<th class="">ezPay Available?</th>
<th class="">merchant Available?</th>
<th class="">All Merchant?</th>
<th class=""></th>
</tr>
</thead>
<tbody class="">
<tr class="" style="background: rgb(255, 89, 0);">
<td class="">fwfewfwe</td>
<td class="">Default Test</td>
<td class="">12</td>
<td class="">0</td>
<td class="">90000</td>
<td class="">2019/10/26 15:05</td>
<td class="">2019/10/26 15:05</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">1</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">
<div class="ui buttons">
<button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
<button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
</div>
</td>
</tr>
<tr class="" style="background: rgb(255, 89, 0);">
<td class="">123</td>
<td class="">Default Test</td>
<td class="">0</td>
<td class="">69000</td>
<td class="">0</td>
<td class="">2019/10/20 14:43</td>
<td class="">2019/10/21 14:43</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">1</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">
<div class="ui buttons">
<button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
<button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
</div>
</td>
</tr>
<tr class="" style="background: rgb(255, 89, 0);">
<td class="">grgrb egeh</td>
<td class="">Default Pulsa Rule Cashback</td>
<td class="">0</td>
<td class="">43545345</td>
<td class="">0</td>
<td class="">2019/10/20 14:45</td>
<td class="">2019/10/30 14:45</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">1</td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="center aligned"><i aria-hidden="true" class="times icon"></i></td>
<td class="">
<div class="ui buttons">
<button class="ui mini icon button"><i aria-hidden="true" class="edit outline icon"></i></button>
<button class="ui mini icon button"><i aria-hidden="true" class="red trash alternate outline icon"></i></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>

Bootstrap 4 tables not fits full width with d-flex

With the new Bootstrap 4 it's not possible anymore to simply apply classes like col-md-2 to the or the tags of a table.
So the solution seems to use class="d-flex" in the parent :
<tr class="d-flex">
but when I do it my whole table don't fit anymore in the parent div. And I can not do anything against it.
Can somebody help me to get the clue?
Here is the code of the table:
<div class="card-body">
<h3 class="col-12 mt-2">Lehrer</h3>
<table class="table table-light">
<tbody>
<tr class="d-flex">
<td class="col-md-1">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
<tr class="d-flex">
<td class="col-md-1">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-4"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-edit"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>

If you want the table cells to fill the width, use 12 columns units...
<tr class="row mx-0">
<td class="col-md-2">Bernadette</td>
<td class="col-md-2">Mayr</td>
<td class="col-md-6"></td>
<td class="col-md-1">
<a class="btn btn-primary" href="/profile/show/3">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/6/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
Or, use ml-auto to push the columns to the right..
<tr class="row mx-0">
<td class="col-md-2">Florian</td>
<td class="col-md-2">Wassermair</td>
<td class="col-md-4">Schulbuchbeauftragter</td>
<td class="col-md-1 ml-auto">
<a class="btn btn-primary" href="/profile/show/4">
<i class="icon icon-eye"></i>
</a>
</td>
<td class="col-md-1">
<a class="btn btn-success" href="/personal/4/edit">
<i class="icon icon-pencil"></i>
</a>
</td>
</tr>
https://www.codeply.com/go/xRodoKUKBf

unable to fix the issue when used bootstrap classes

I see two issues with my code. Header is not getting fixed and second issue is word wrap is not applicable for the headers/rows.
I have used bootstrap classes, but still facing issues. I want to fix the table header and only rows should be scrollable and if the text is long it should automatically word wrap. I have multiple columns in my application(approximately 15 columns).Please advice.
To view the sample code click here.
Sample html code:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2Header2Header2Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

You could try a non table approach. If your ok with having set widths on the columns with content wrapping in the cells. Here's an example https://codepen.io/flurrd/pen/jmMNxK?editors=1100
Note: Class names are terrible in this example. I'd BEM it up for proper usage.
.table-body {
max-height: 200px;
overflow-y:auto;
}
.t-row {
display: flex;
border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
background: #e3e3e3;
}
.col {
word-wrap: break-word;
flex: 1 0 30%;
max-width: 33.3333%;
}
.cell {
padding: 8px;
}
<div class="table-wrap">
<div class="t-row t-header">
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
</div>
<div class="table-body">
<div class="t-row">
<div class="col">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="col">
<div class="cell">
1111
</div>
</div>
<div class="col">
<div class="cell">
11111111
</div>
</div>
</div>
</div>
</div>

Bootstrap table missing some borders

I'm using Bootstrap to create a simple table:
As you can see, It is missing the vertical border that separates columns "Estado" from "Sintoma and "Fecha creación" from "Abrir".
This is the html code corresponding to the table:
<table class="table-responsive table-bordered table-hover" style="width:100%; margin-top:6px;">
<thead>
<tr style="background-color:#286090; color:white;">
<th style="text-align:center;">Tipo</th>
<th style="text-align:center;">Número</th>
<th style="text-align:center;">Servicio</th>
<th style="text-align:center;">Estado</th>
<th style="text-align:center;">Síntoma</th>
<th style="text-align:center;">Fecha Creación</th>
<th style="text-align:center;">Abrir</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:center;" title="INC">
<i class="fa fa-file-text-o"></i>
</td>
<td style="padding-left: 5px;">INC-0003828206</td>
<td style="padding-left: 5px;">GigADSL</td>
<td style="padding-left: 5px;">Activo</td>
<td style="padding-left: 5px;">00-No afecta al servicio</td>
<td style="padding-left: 5px;">2017-01-19 14:26</td>
<td style="padding-left: 5px; text-align:center;">
<a href="" target="_blank">
<button class="btn btn-primary">Abrir enlace</button>
</a>
</td>
</tr>
<tr>
<td style="text-align:center;" title="INC">
<i class="fa fa-file-text-o"></i>
</td>
<td style="padding-left: 5px;">INC-0003828206</td>
<td style="padding-left: 5px;">IMAGENIO</td>
<td style="padding-left: 5px;">Activo</td>
<td style="padding-left: 5px;">00-No afecta al servicio</td>
<td style="padding-left: 5px;">2017-01-19 14:26</td>
<td style="padding-left: 5px; text-align:center;">
<a href="" target="_blank">
<button class="btn btn-primary">Abrir enlace</button>
</a>
</td>
</tr>
<tr>
<td style="text-align:center;" title="INC">
<i class="fa fa-file-text-o"></i>
</td>
<td style="padding-left: 5px;">INC-0003828206</td>
<td style="padding-left: 5px;">VARIOS</td>
<td style="padding-left: 5px;">Activo</td>
<td style="padding-left: 5px;">00-No afecta al servicio</td>
<td style="padding-left: 5px;">2017-01-19 14:26</td>
<td style="padding-left: 5px; text-align:center;">
<a href="" target="_blank">
<button class="btn btn-primary">Abrir enlace</button>
</a>
</td>
</tr>
<tr>
<td style="text-align:center;" title="INC">
<i class="fa fa-file-text-o"></i>
</td>
<td style="padding-left: 5px;">INC-0003835091</td>
<td style="padding-left: 5px;">GigADSL</td>
<td style="padding-left: 5px;">Activo</td>
<td style="padding-left: 5px;">00-No afecta al servicio</td>
<td style="padding-left: 5px;">2017-01-25 10:56</td>
<td style="padding-left: 5px; text-align:center;">
<a href="" target="_blank">
<button class="btn btn-primary">Abrir enlace</button>
</a>
</td>
</tr>
<tr>
<td style="text-align:center;" title="INC">
<i class="fa fa-file-text-o"></i>
</td>
<td style="padding-left: 5px;">INC-0003835091</td>
<td style="padding-left: 5px;">IMAGENIO</td>
<td style="padding-left: 5px;">Activo</td>
<td style="padding-left: 5px;">00-No afecta al servicio</td>
<td style="padding-left: 5px;">2017-01-25 10:56</td>
<td style="padding-left: 5px; text-align:center;">
<a href="" target="_blank">
<button class="btn btn-primary">Abrir enlace</button>
</a>
</td>
</tr>
<tr>
<td style="text-align:center;" title="INC">
<i class="fa fa-file-text-o"></i>
</td>
<td style="padding-left: 5px;">INC-0003835091</td>
<td style="padding-left: 5px;">VARIOS</td>
<td style="padding-left: 5px;">Activo</td>
<td style="padding-left: 5px;">00-No afecta al servicio</td>
<td style="padding-left: 5px;">2017-01-25 10:56</td>
<td style="padding-left: 5px; text-align:center;">
<a href="" target="_blank">
<button class="btn btn-primary">Abrir enlace</button>
</a>
</td>
</tr>
</tbody>
</table>
Any idea why this is happening?