Bootstrap class="table" 不起作用 [关闭]答案

【问题标题】：Bootstrap class="table" doesnt work [closed]Bootstrap class="table" 不起作用 [关闭]
【发布时间】：2015-09-12 06:42:24
【问题描述】：

我有一个简单的表格，并且正在使用敲除来填充数据。我正在尝试使用两个模板切换我的表格主体。我相信这是 boostrap 不喜欢的。请看一下我的代码并给我建议。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type='text/javascript' src='Scripts/knockout-3.1.0.js'></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">               
  <table class="table" data-bind="visible: folks().length > 0" >
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th></th>
      </tr>
    </thead>
    <tbody data-bind="template: { name: templateToUse, foreach: folks}"></tbody>
  </table>
  <button data-bind="click: $root.addItem">New Item</button> 
</div>
</body>
</html>

<script type='text/javascript' src='Scripts/myscript.js'></script>
<script id="itemTmpl" type="text/html"> 
    <tbody>
       <tr>
           <td>
                <span data-bind="text: name"></span>
           </td>
            <td>
                 <span data-bind="text: age"></span>
            </td>            
            <td class="buttons">
                <button>Edit</button>
                <button>Delete</button>              
            </td>   
        </tr>                
    </tbody> 
</script>

<script id="editTmpl" type="text/html">
<tbody>
       <tr>
           <td>
                <input type="text" data-bind="value: name" ></input>                 
            </td>          
            <td>
                 <input data-bind="value: age"></input>               
            </td>
            <td class="buttons">
                <button>Done</button>
                <button>Cancel</button>
            </td>         
       </tr>
</tbody>
</script>

【问题讨论】：

你从来没有关闭过你的第一个 tbody？
@g3mini：它已经关闭，同一行。
哦，是的，你是对的。道歉

标签： javascript html css twitter-bootstrap knockout.js

【解决方案1】：

您在模板中不必要地包含了tbody 标签。模板内容被插入到父标签中，在您的情况下，它已经是一个 tbody 元素。 Bootstrap 失败，因为呈现的表格看起来像

<table>
 ...
 <tbody>
  <tbody> 
   ...

【讨论】：

非常感谢。