Bootstrap 3 tables don't work properly with Meteor

StackOverflow https://stackoverflow.com/questions/23505249

  •  16-07-2023
  •  | 
  •  

سؤال

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?

enter image description here

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>
هل كانت مفيدة؟

المحلول

You need to wrap the table content with <tbody>:

<table class="table table-striped">
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top