Menu
Bootstrap tables don't display like they are supposed to when I use them with Meteor. table-striped doesn't work and the padding is off.
I've tried using the bootstrap-3 package as well as a base meteor app with the css linked to a CDN.
Does anyone know what is going on?
Here is the meteor html
<head>
<title>test</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<div class="container">
<h1>Hello World!</h1>
<p>Default</p>
<table class="table">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
<p>Table-striped</p>
<table class="table table-striped">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
<p>Table-bordered</p>
<table class="table table-bordered">
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
<tr>
<td>Test 1</td>
<td>Test 2</td>
</tr>
</table>
</div>
</template>
417
You need to wrap the table content with <tbody>:
<table class="table table-striped">
<tbody>
<tr>
...
</tr>
</tbody>
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
