响应表在firefox中工作，而不是在chrome中

Question

列标题分成两行，长度非常小。 Firefox没有问题，但在chrome中不起作用。我试过更改boostrap版本。我还将表响应标记移动到面板div元素。如果表中没有数据，则列标题不会分成两行。我有一种感觉“ - ”＆amp; “：”字符强制换行符。

<div class="panel panel-primary" >
            <div class="panel-heading">Task Details</div>
            {{taskctrlr.status}}
            <div id="taskloadstatus" style="background-color:LightSkyBlue;color: #FFFFFF;">Please wait, tasks are being loaded</div>

            <table  class="table table-striped table-hover table-responsive table-bordered">
                <tr class="info">
                    <th>Title</th>
                    <th>
                        <a href="#" ng-click="orderByField='payorName'; reverseSort = !reverseSort">
                        Payor<span ng-show="orderByField == 'payorName'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
                        </a>
                    </th>
                    <th>
                        <a href="#" ng-click="orderByField='clientId'; reverseSort = !reverseSort">
                        Client ID<span ng-show="orderByField == 'clientId'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
                        </a>
                    </th>
                    <!--th>
                        <a href="#" ng-click="orderByField='payorId'; reverseSort = !reverseSort">
                        Payor ID<span ng-show="orderByField == 'payorId'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
                    </th-->
                    <th>
                        <a href="#" ng-click="orderByField='accessionID'; reverseSort = !reverseSort">
                        Accession Number<span ng-show="orderByField == 'accessionID'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
                    </th>
                    <th>
                        <a href="#" ng-click="orderByField='assignedTo'; reverseSort = !reverseSort">
                        Assigned To<span ng-show="orderByField == 'assignedTo'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
                    </th>
                    <th>
                        <a href="#" ng-click="orderByField='createDate'; reverseSort = !reverseSort">
                        Create Date<span ng-show="orderByField == 'createDate'"><span ng-show="!reverseSort" class="glyphicon glyphicon-chevron-up"></span><span ng-show="reverseSort" class="glyphicon glyphicon-chevron-down"></span></span>
                    </th>
                    <th>Follow Up Tasks</th>
                    <th>Action</th>
                    <th>Comments</th>
                </tr>
                <tr ng-repeat="task in taskctrlr.taskList |orderBy:orderByField:reverseSort track by $index">
                    <td>{{task.title}}</td>
                    <td>{{task.payorName}}</td>
                    <td>{{task.clientId}}</td>
                    <!--td>{{task.payorId}}</td-->
                    <td>{{task.accessionID}}</td>
                    <td>
                        <div ng-show="task.assignedTo != null">
                            {{task.assignedTo}}
                        </div>
                        <div ng-show="task.assignedTo == null ">
                            <a class="btn btn-default" ng-click="taskctrlr.pickUpTask(task.taskId);taskctrlr.getTasks()">Pick Up</a>
                        </div>                          
                    </td>
                    <td>{{task.createDate}}</td>
                    <td>    
                        <div ng-show="task.showsubtask">
                            <a ng-click="task.showsubtask=false">Hide</a>
                            <table class="table">
                                <tr class="success">
                                    <!--th>Followup Title</th-->
                                    <th>Description</th>
                                    <th>Due Date</th>
                                    <th>Follow up Action</th>
                                </tr>
                                <tr ng-repeat="subtask in task.subtasklist track by $index">
                                    <!--td>{{subtask.name}}</td-->
                                    <td>{{subtask.description}}</td>
                                    <td>{{subtask.duedate}}</td>
                                    <td>
                                        <form name="FollowUpForm">
                                            <input type="text" class="form-control" ng-model="subtask.followupComment" placeholder="Enter resolution to Complete..." required>                                                                                           
                                            <a class="btn btn-default" ng-disabled="FollowUpForm.$invalid" ng-click="taskctrlr.dofollowup(subtask.id,task.taskId,subtask.followupComment)">Complete</a>
                                        </form>    
                                    </td>                                       
                                </tr>
                        </table>
                        </div>
                        <div ng-show="! task.showsubtask && task.subtasklist.length > 0 ">
                            <a ng-click="task.showsubtask=true">Show</a>
                        </div>

                    </td>
                    <td>
                    <a class="btn btn-primary" ng-click="taskctrlr.gototask(task.taskURL,task.taskId,task.assignedTo)">Do it</a>
                    </td>
                    <td>
                        <form name="AddCommentForm">
                            <input type="text" class="form-control" ng-model="task.comment" ng-change="id=task.comment" placeholder="Add comments here..." required>

                                <!--div>$dirty: {{ AddCommentForm.$dirty}}</div>
                                <div>$pristine: {{ AddCommentForm.$pristine }}</div-->
                             <span class="input-group-btn">
                                 <a class="btn btn-warning" ng-disabled="AddCommentForm.$invalid" type="button" id="addComments" ng-click="taskctrlr.updateComment(task.taskId,task.comment,$index); addAlert()">Add New Comment</a>
                              </span>
                        </form>
                    </td>
                    <!-- /bonita/API/bpm/humanTask/{{task.taskId}}?d=processId -->
                </tr>
            </table>
        </div>

铬：

火狐：

Answer 1

尝试删除span标记。

<span class="input-group-btn">
       <a class="btn btn-warning" ng-disabled="AddCommentForm.$invalid" type="button" id="addComments" ng-click="taskctrlr.updateComment(task.taskId,task.comment,$index); addAlert()">Add New Comment</a>
</span>