I am working on a table that has three pictures in a row, with 100% width. I want the table to be responsive and stack the pictures into one column when the space is limited.
The issue I am currently facing is that the elements of the table do not stack into one column when the browser window width is minimized or when viewed on a mobile phone, causing the picture on the right side to become invisible.
Below is my code:
http://codepen.io/anon/pen/jPYyeK
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
.Table-Upper {
width: 100%;
text-align: center;
}
</style>
</head>
<body>
<div class="col-sm-2">
<div class="list-group">
<a href="#" class="list-group-item active">Start</a>
<a href="Foo.html" class="list-group-item">Foo</a>
</div>
</div>
<div class="col-sm-10">
<table class="Table-Upper">
<tr>
<td><img id="upper-pics" src="p1.jpg" width="200"></td>
<td><img id="upper-pics" src="p2.png" width="100"></td>
<td><img id="upper-pics" src="p3.jpg" width="200"></td>
</tr>
</table>
</div>
</body>
</html>