CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
michaelmcgurk
michaelmcgurk

Reputation: 6509

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.

Upvotes: 0

Views: 108

Answers (2)

Jyoti Pathania
Jyoti Pathania

Reputation: 4989

Add class "table" and tbody tab to your HTML. this will fix your issue.I made the changes in code below: 

    <div class="table-responsive">

<table class="table">

    <thead>
        <th>Subject</th>
        <th>Dates</th>
        <th>Time</th>
        <th>With</th>
        <th>Cost</th>
    </thead>
<tbody>
<tr><td ><a href="/events/winter/">Winter</a></td><td >27 February 2016 </td><td >10:00am - 4:00pm</td><td >Gordon Peterson&nbsp;</td><td class="elist-cost"></td></tr>
</tbody>
</table>

</div>

    </div>
</div>

example code here CODEPEN

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14149

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/

Upvotes: 2

Related Questions