michaelmcgurk michaelmcgurk - 3 months ago 22
CSS Question

Responsive Table glitch with Twitter Bootstrap

I am having some issues making my table responsive.

In fact the headings aren't aligning with the content below. Can someone help me out?



/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
margin: 10px;
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">

<div class="table-responsive">

<table>

<thead>
<th>Subject</th>
<th>Dates</th>
<th>Time</th>
<th>With</th>
<th>Cost</th>
</thead>

<tr style="display:block"><td class="elist-title"><a href="/events/winter/">Winter</a></td><td class="elist-date">27 February 2016 </td><td class="elist-time">10:00am - 4:00pm</td><td class="elist-with">Gordon Peterson&nbsp;</td><td class="elist-cost"></td></tr>

</table>

</div>

</div>
</div>





Demo: https://jsfiddle.net/ppq3xxwv/

Thank you.

Answer

remove inline style in tr & Add class table like table

<tr /*style="display:block"*/><td class="elist-title"><a href="/events/winter/">Winter</a></td><td class="elist-date">27 February 2016 </td><td class="elist-time">10:00am - 4:00pm</td><td class="elist-with">Gordon Peterson&nbsp;</td><td class="elist-cost"></td></tr>

<table class="table">

https://jsfiddle.net/ppq3xxwv/1/

Comments