I am brand new to front end HTML and trying to construct a table identical to the below example whereby I have cell numbering identical to this.
My code as it stands when rendered looks like this.
I am struggling to figure out how I achieve the cell numbering. I have done a few things but it looks out of sorts. Is this done via colspan.
<table border="1">
<tr>
<td>Bruce Springsteen Born To Run</td>
<td><img src="images/borntorun.jpg" alt="bruce springsteen"></td>
</tr>
<tr>
<td>Thunder Road</td>
<td>4.47</td>
</tr>
<tr>
<td>10th Avenue Freeze Out</td>
<td>3.10</td>
</tr>
<tr>
<td>Night</td>
<td>3.00</td>
</tr>
<td>Backstreets</td>
<td>6.29</td>
</tr>
<tr>
<td>Born To Run</td>
<td>4.29</td>
</tr>
<tr>
<td>She's the one</td>
<td>4.29</td>
</tr>
<tr>
<td>Meeting Across The River</td>
<td>3.15</td>
</tr>
<tr>
<td>Jungleland</td>
<td>9.33</td>
</table>
<table border="1">
<tr>
<td>1</td>
<td>Bruce Springsteen Born To Run</td>
<td><img src="images/borntorun.jpg" alt="bruce springsteen"></td>
</tr>
<tr>
<td>2</td>
<td>Thunder Road</td>
<td>4.47</td>
</tr>
<tr>
<td>3</td>
<td>10th Avenue Freeze Out</td>
<td>3.10</td>
</tr>
<tr>
<td>4</td>
<td>Night</td>
<td>3.00</td>
</tr>
<td>5</td>
<td>Backstreets</td>
<td>6.29</td>
</tr>
<tr>
<td>6</td>
<td>Born To Run</td>
<td>4.29</td>
</tr>
<tr>
<td>7</td>
<td>She's the one</td>
<td>4.29</td>
</tr>
<tr>
<td>8</td>
<td>Meeting Across The River</td>
<td>3.15</td>
</tr>
<tr>
<td>9</td>
<td>Jungleland</td>
<td>9.33</td>
</table>
You can use this and add 1 column to it and you can get what you want.
You can use Bootstrap and make it responsive as well, if you need more info search here, example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6" style="background-color:yellow;">
Bruce Springsteen Born To Run
</div>
<div class="col-xs-6" style="background-color:pink;">
<img src="images/borntorun.jpg" alt="bruce springsteen">
</div>
</div>
<div class="row">
<div class="col-xs-2" style="background-color:yellow;">
1
</div>
<div class="col-xs-5" style="background-color:pink;">
Thunder Road
</div>
<div class="col-xs-5" style="background-color:pink;">
4.47
</div>
<div class="col-xs-2" style="background-color:yellow;">
2
</div>
<div class="col-xs-5" style="background-color:pink;">
10th Avenue Freeze Out
</div>
<div class="col-xs-5" style="background-color:pink;">
3.10
</div>
</div>
</div>
</body>
</html>
You can use colspan to do it.
<table border="1" width="100%">
<tr>
<td colspan="2">Bruce Springsteen Born To Run</td>
<td><img src="http://www.trait-tech.com/uploads/T-TOOL-9406__Acrylic-Mirror-Effect-3d-Wall-Decals-Flower-Shaped-Mirrors-Stickers-Pack-of-5-Set-for-Halloween-Chirstmas-Valentine-.jpg" alt="bruce springsteen"></td>
</tr>
<tr>
<td>1</td>
<td>Thunder Road</td>
<td>4.47</td>
</tr>
<tr>
<td>2</td>
<td>10th Avenue Freeze Out</td>
<td>3.10</td>
</tr>
<!--Other rows here-->
</table>
Related
I have a Flask application that takes a bunch of input from the users, processes it and generates a table/matrix of values.
I want to display this table to the user with different colors for different cells. At the time of the table generation I know what color I want the cell to be.
I am using Bootstrap4. Can this be done using Bootstrap?
The class attribute can be used in the table row to get the required colors.
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>ABC</td>
<td>10</td>
</tr>
<tr class="danger">
<td>DEF</td>
<td>20</td>
</tr>
<tr class="info">
<td>GHI</td>
<td>30</td>
</tr>
<tr class="success">
<td>JKL</td>
<td>40</td>
</tr>
<tr class="warning">
<td>MNO</td>
<td>50</td>
</tr>
</tbody>
</table>
In Bootstrap 4, you can give color to the table rows by adding bg classes to the <tr> elements like;
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
Take a look at bootstrap documentation of tables which explains it in detail
This is the way to add color on cells
<!doctype html>
<html lang="en">
<head>
<title>Table Color</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe#example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo#example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act#example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec#example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie#example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
More about table
table documentation bootstrap 4
Lets say I am reading the table contents from database and printing the table rows. Sometimes I may have more than 5 rows data in the database sometimes I may have less than 5 rows data in the database.
What I want is when the table rows exceeds 5 rows it should take scrollbar, if it is less than 5 rows it should not take scrollbar.
I have gone through many websites where they fix the table body height and if the content exceeds that height it takes the scrollbar.
So I don't want table body height to be fixed because when there is less content in the table body it will take the fixed table body size it look odd. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
My table look like below image.
Scrollable tables aren't the most fun to play around with, so I've added a snippet that should get you moving along.
$(document).ready(function(){
if( $('#results tr').length >= 5 ) {
$('#myTable').addClass('add-scroll');
}
});
.add-scroll {
overflow-y: scroll;
height: 100px;
}
#results tr td {
width: 33%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<td>
<table width="100%" height="40">
<tr>
<th width="33%">Firstname</th>
<th width="33%">Lastname</th>
<th width="33%">Email</th>
</tr>
</table>
</td>
</tr>
</thead>
<tbody scrollbars="yes" class="dyn-height">
<tr>
<td>
<div id="myTable">
<table width="100%" id="results">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
</body>
You have to count the number of rows then add class when the rows are greater than 5.
$(document).ready(function(){
var rowCount = $('tbody tr').length;
if(rowCount > 5){
console.log(rowCount);
$('table').addClass('do-scroll');
}
});
.do-scroll{
width: 100%;
height: 220px;
display: -moz-grid;
overflow-y: scroll;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
I have a table in which I need to split into 2 columns which contain 30% of the image and 70% of the contents. In the 30% of image section
1.I need a big image
2. Below that, I need 4 small images
HTML:
<table>
<thead>
<th style="width:30%">Image</th>-- I want this to be 30% of the table heading
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
</thead>
<tbody>
<tr *ngFor="let data of dataa>
<td> </td>-- I want this to cover 30% of the table, it should have one big image which combines 2 rows and below that, I need small 4 images with 2 images in each row
<!-- This should be 70% of table column -->
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
<!-- 70% ends here -->
</tr>
</tbody>
</table>
Do you want something like this. The below class is to remove the space between the images.
.images {
text-align:center;
}
th.width{
width:30%;
}
<table>
<thead>
<th class="width">Image</th>
<th>Data1</th>
<th>Description</th>
<th>Address</th>
<th>Website</th>
<th>Phone No</th>
<th>E-mail</th>
<th>Images</th>
<th>Comments</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>
<div><img src="http://via.placeholder.com/400x150" width="100%" /></div>
<div class="images">
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
</div>
</td>
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
</tr>
</tbody>
</table>
Try using bootstrap's grid system. It should do the trick and give you a nice responsive table aswell. You can get bootstrap from: here After including bootstrap try using the classes for tables and the grid system for styling the table.
Example source
Simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hope this helps!
I'm using Bootstrap 3 for a fairly simple table, I need to display 4 columns side by side even on phones, something like this:
<div class="container">
<div class="row" >
<div class="col-xs-5" >
<p style="margin-top: 25%;">A Day in the life of Dror</p>
</div>
<div class="col-xs-1">6:30 am<br />7:30 am<br />8:00 am<br />13:00 am<br />16:00 am<br />17:00 am<br />18:00 am<br />20:00 am<br />22:00 am<br />23:00 am</div>
<div class="col-xs-1">sample img</div>
<div class="col-xs-5 ">WAKE UP <br />MEETING / BREAKFAST <br />FIRST LESSON / TFILA <br />LUNCH BREAK <br />END OF SCHOOL <br />HOMEWORK TIME<br />DINNER <br />EXTRA CURRICULUM ACTIVITIES<br />ALL RETURN TO BUILDING <br />LIGHT'S OUT</div>
</div>
</div>
but on phones it still displays stacked.
Well the code works fine, you must be facing an issue due the padding on smaller phones, maybe you can set the padding to 0px or to any other value less than the default which is 15px for both the left and right side, we need to do this for all the columns under the row.
.remove-padding > div{
padding:0px;
}
So I add the class remove-padding to the remove the padding for all the children of the first level of row (i.e the columns under the row). Please let me know if this fixes your issue.
JSFiddle Demo
.table {
border-bottom:0px !important;
}
.table th, .table td {
border: 1px !important;
}
.fixed-table-container {
border:0px !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin-top:50px";>
<div class="container">
<table class="table">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> </td>
<td>6:30 am</td>
<td>sample img</td>
<td>WAKE UP</td>
</tr>
<tr>
<td> </td>
<td>7:30 am</td>
<td> </td>
<td>MEETING / BREAKFAST</td>
</tr>
<tr>
<td> </td>
<td>8:00 am</td>
<td> </td>
<td>FIRST LESSON / TFILA </td>
</tr>
<tr>
<td> </td>
<td>13:00 am</td>
<td> </td>
<td>LUNCH BREAK</td>
</tr>
<tr>
<td> A Day in the life of Dror </td>
<td>16:00 am</td>
<td> </td>
<td>END OF SCHOOL</td>
</tr>
<tr>
<td> </td>
<td>17:00 am</td>
<td> </td>
<td>HOMEWORK TIME</td>
</tr>
<tr>
<td> </td>
<td>18:00 am</td>
<td> </td>
<td>DINNER</td>
</tr>
<tr>
<td> </td>
<td>20:00 am</td>
<td> </td>
<td>EXTRA CURRICULUM ACTIVITIES</td>
</tr>
<tr>
<td> </td>
<td>23:00 am</td>
<td> </td>
<td>ALL RETURN TO BUILDING</td>
</tr>
<tr>
<td> </td>
<td>24:00 am</td>
<td> </td>
<td>LIGHT'S OUT</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I am using the following HTML/Razor to create a details row for when the user clicks the Run App button. The primary row is 4 columns wide, and the details row spans the 4 columns.
Detail Row Hidden
Detail visible
Here the detail row causes the table to expand really weirdly, it's way to large. It's not center either for some reason.
Small Table looks correct
It all looks fine when I reduce the size of the table. It's centered correctly and doesn't look super wide.
This is the HTML and a Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Components</th>
<th>Name</th>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Access,Querying</td>
<td>Basic Querying</td>
<td>Executes a stored procedure, fetching a single result set, without sending data in to the database.</td>
<td>
<button type="button" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e" data-vm-required="False" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e">
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.
<table class="table table-responsive">
<tbody>
<tr>
<th>PostalCode</th>
<th>City</th>
<th>AddressLine2</th>
<th>AddressLine1</th>
<th>AddressID</th>
</tr>
<tr>
<td>98011</td>
<td>Both</td>
<td></td>
<td>1970 Napa Ct.</td>
<td>1</td>
</tr>
<tr>
<td>98018</td>
<td>Bothell68</td>
<td></td>
<td>9833 Mt. Dias Blv.686</td>
<td>2</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>7484 Roundtree Drive</td>
<td>3</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>9539 Glenside Dr</td>
<td>4</td>
</tr>
<tr>
<td>85323</td>
<td>Phoenix</td>
<td></td>
<td>1226 Shoe St.</td>
<td>5</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>1399 Firestone Drive</td>
<td>6</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>5672 Hale Dr.</td>
<td>7</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>6387 Scenic Avenue</td>
<td>8</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>8713 Yosemite Ct.</td>
<td>9</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>250 Race Court</td>
<td>10</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Data Access,Querying</td>
<td>Parameterized Query</td>
<td>Executes a stored procedure, fetching a single result set, filtered by a City passed into the stored procedure.</td>
<td>
<button type="button" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75" data-vm-required="True" data-app-name="Parameterized Query" data-toggle="modal" data-target="#appParameters" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="hidden">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75">
</div>
</div>
</td>
</tr>
</tbody>
</table>
What am I doing wrong with the table that's causing it to not look like the way it does at the smaller Window scale?
Remove container class here and it will work normally.
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.