How to make buttons stay aligned in table when resizing - html

Question

I have a table that has buttons in it. It looks great but when I adjust the browser for resizing some of the content moves, causing the buttons to not be lined up properly. Any thoughts on this would be great. The table needs to look the way it does, with the thick borders on the outside and between each row and column. It may be a simple fix, but for some reason it is stumping me. I've tried using bootstrap and putting each one into it's own row .
table {
border-collapse: separate;
border-spacing: 15px 15px;
}
td {
background-color:white;
text-align:center;
}
img {
margin:0px auto;
display:block
}
p {
padding-top:5px;
}s
h3 {
margin-top:10px;
letter-spacing:2px;
font-weight: lighter;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h1>Finding an Internship</h1>
<hr />
</div>
<div class="col-xs-12 col-sm-12">
<p style="color:#036CB6; font-size:18px;">Students are responsible for finding their own internships but there are many resources available.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12">
<div class="table-responsive" style="background-color: #F1F2F2">
<table class="table">
<tr>
<td>
<img src="Images/advising/internships/InternshipCoordinators.png"" class="img-responsive" alt="Internship Coordinators">
<h3>Internship<br/>Coordinators</h3>
<p>Visit with your Department<br/>Internship Coordinator to ensure<br/>you understand all your<br/>department's guidelines.</p>
<a style="background-color:#0668B3;" href="x116191.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/ResumeAndCoverLetterReviews.png" class="img-responsive" alt="Resume and CoverLetter Reviews">
<h3>RESUME AND COVER<br/>LETTER REVIEWS</h3>
<p>Have your resume and cover letter<br/>reviewed by meeting with atrained<br/>peer mentor.<br/><br/></p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/iplan/beta/tutorials/advising-schedule-an-appointment" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/InternshipApprovalProcess.png" class="img-responsive" alt="Internship Approval Process">
<h3>INTERNSHIP<br />APPROVAL PROCESS</h3>
<p>Once you have found an internship,<br />follow the internship approval<br /> process.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116857.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
<tr>
<td>
<img src="Images/advising/internships/CareerNavigator.png" class="img-responsive" alt="Career Navigator">
<h3>CAREER NAVIGATOR</h3>
<p><br/>Read past issues of Perspective,<br/>watch instructional videos, find past<br/>workshops and more.<br/><br/></p>
<a style="background-color:#0668B3;" href="https://byui-csm.symplicity.com/" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/AlumniOffice.png" class="img-responsive" alt="Alumni Office">
<h3>ALUMNI OFFICE</h3>
<p><br/>Apply to travel to a conference,<br/>come get a lunch at a Brown Bag<br/>Discussion, attend workshops and<br/>more.</p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/alumni" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/Linkedin.png" class="img-responsive" alt="Linkedin">
<h3>LINKEDIN</h3>
<p><br/>Get the latest information and read<br/>faculty news articles in our<br/>Instructional Development<br/>newsroom.</p>
<a style="background-color:#0668B3;" href="https://www.linkedin.com/" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
<tr>
<td>
<img src="Images/advising/internships/cnc.png" class="img-responsive" alt="Career Networking Center">
<h3>CAREER NETORKING<br/>CENTER</h3>
<p>Offers the networking crash course,<br/>walk-in resume help, and general<br/>career planning.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116064.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/InternshipServiceMissionaries.png" class="img-responsive" alt="InternshipServiceMissionaries">
<h3>INTERNSHIP SERVICE<br/>MISSIONARIES</h3>
<p>Visit with your Department<br/>Internship Service Missionaries to<br/>seek out opportunites.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116158.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/11-15BYUIInternships.png" class="img-responsive" alt="11-15 BYUI Internships">
<h3>BYU-IDAHO<br/>INTERNSHIPS: 2011-2015</h3>
<p>Search past internships completed<br/>by BYU-Idaho students for ideas of<br/>companies.<br/><br/></p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/Documents/advising/internships/BYUI%20INTERNSHIPS%202011%20-%202015(1).xlsx" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
</table>
</b>
</div>
</div>
</div>

Answer 1

To ensure the button remains consistent, you have to wrap the h3 and p elements inside a container that has fixed height, that way when you resize the browser the height remains the same.
HTML
<td>
<img>
<div class="fixed-height">
<h3>title</h3>
<p>content</p>
</div>
<a>button</a>
</td>
CSS
.fixed-height {
height: 300px;
}

Answer 2

Here you go :)
table {
border-collapse: separate;
border-spacing: 15px 15px;
}
td {
background-color:white;
text-align:center;
position: relative;
}
td a {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
img {
margin:0px auto;
display:block
}
p {
padding-top:5px;
}s
h3 {
margin-top:10px;
letter-spacing:2px;
font-weight: lighter;
}
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12">
<h1>Finding an Internship</h1>
<hr />
</div>
<div class="col-xs-12 col-sm-12">
<p style="color:#036CB6; font-size:18px;">Students are responsible for finding their own internships but there are many resources available.</p>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12">
<div class="table-responsive" style="background-color: #F1F2F2">
<table class="table">
<tr>
<td>
<img src="Images/advising/internships/InternshipCoordinators.png"" class="img-responsive" alt="Internship Coordinators">
<h3>Internship<br/>Coordinators</h3>
<p>Visit with your Department<br/>Internship Coordinator to ensure<br/>you understand all your<br/>department's guidelines.</p>
<a style="background-color:#0668B3;" href="x116191.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/ResumeAndCoverLetterReviews.png" class="img-responsive" alt="Resume and CoverLetter Reviews">
<h3>RESUME AND COVER<br/>LETTER REVIEWS</h3>
<p>Have your resume and cover letter<br/>reviewed by meeting with atrained<br/>peer mentor.<br/><br/></p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/iplan/beta/tutorials/advising-schedule-an-appointment" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/InternshipApprovalProcess.png" class="img-responsive" alt="Internship Approval Process">
<h3>INTERNSHIP<br />APPROVAL PROCESS</h3>
<p>Once you have found an internship,<br />follow the internship approval<br /> process.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116857.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
<tr>
<td>
<img src="Images/advising/internships/CareerNavigator.png" class="img-responsive" alt="Career Navigator">
<h3>CAREER NAVIGATOR</h3>
<p><br/>Read past issues of Perspective,<br/>watch instructional videos, find past<br/>workshops and more.<br/><br/></p>
<a style="background-color:#0668B3;" href="https://byui-csm.symplicity.com/" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/AlumniOffice.png" class="img-responsive" alt="Alumni Office">
<h3>ALUMNI OFFICE</h3>
<p><br/>Apply to travel to a conference,<br/>come get a lunch at a Brown Bag<br/>Discussion, attend workshops and<br/>more.</p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/alumni" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/Linkedin.png" class="img-responsive" alt="Linkedin">
<h3>LINKEDIN</h3>
<p><br/>Get the latest information and read<br/>faculty news articles in our<br/>Instructional Development<br/>newsroom.</p>
<a style="background-color:#0668B3;" href="https://www.linkedin.com/" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
<tr>
<td>
<img src="Images/advising/internships/cnc.png" class="img-responsive" alt="Career Networking Center">
<h3>CAREER NETORKING<br/>CENTER</h3>
<p>Offers the networking crash course,<br/>walk-in resume help, and general<br/>career planning.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116064.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/InternshipServiceMissionaries.png" class="img-responsive" alt="InternshipServiceMissionaries">
<h3>INTERNSHIP SERVICE<br/>MISSIONARIES</h3>
<p>Visit with your Department<br/>Internship Service Missionaries to<br/>seek out opportunites.<br/><br/></p>
<a style="background-color:#0668B3;" href="x116158.xml" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
<td>
<img src="Images/advising/internships/11-15BYUIInternships.png" class="img-responsive" alt="11-15 BYUI Internships">
<h3>BYU-IDAHO<br/>INTERNSHIPS: 2011-2015</h3>
<p>Search past internships completed<br/>by BYU-Idaho students for ideas of<br/>companies.<br/><br/></p>
<a style="background-color:#0668B3;" href="http://www.byui.edu/Documents/advising/internships/BYUI%20INTERNSHIPS%202011%20-%202015(1).xlsx" class="btn btn-primary" role="button">LEARN MORE</a>
</td>
</tr>
</table>
</b>
</div>
</div>
</div>