bootstrap rowspan firefox bug

时间:2017-05-26 08:14:37

标签: html css twitter-bootstrap firefox

浏览器:只有firefox,Chrome就行了 操作系统: Linux,Windows(OSX未测试)

示例:                  

bkLib.onDomLoaded(function() {
  nicEditors.editors.push(new nicEditor().panelInstance(document.getElementById('single_answer_description')));
});

https://jsfiddle.net/fdyrs27x/1/

说明 有3种情况,仅在第一种情况下,错误发生在6. td下以'2'开头的行上。在td下面有一行,但是单元格扩展为四行。它不应该存在。

  1. 默认bootstrap
  2. bootstrap with td,tr - >边框:1px实心 灰色;
  3. 默认的bootsrap只有2行
  4. 有人知道如何修理它吗?

3 个答案:

答案 0 :(得分:1)

<强>尝试

从下面的位置下载bootstrap css。     [https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css] 将它嵌入你的HTML /页面。

从表定义中注释以下代码。

border-collapse:collapse

了解更多Here

答案 1 :(得分:1)

将以下内容添加到外部引导程序css

`table {
    border-collapse: initial !important;
}`

它会阻止表格边框折叠成单个边框。

不要编辑bootstrap.css文件。

答案 2 :(得分:0)

bootstrap css有一种风格

 .table > tbody > tr > td{
   padding: 8px;
   line-height: 1.42857143;
   vertical-align: top;
   border-top: 1px solid #ddd;
}

你需要编写代码,以便覆盖它。 (导致问题)

所以您的代码应该是:检查下面的代码段或jsFiddle

&#13;
&#13;
.table.bordered, .borderd th, .table > tbody > tr > td{
  border: 1px solid gray;
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
       
       <h2>
         ERROR SHOWN
       </h2>
       <table class="table table-stripped day-list">
            <tbody>

            <tr class="day-row">
                <td class="center" rowspan="4">1</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
               
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">2</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">HERE IS BORDER-BOTTOM SHOWN</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                 <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">3</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>

            </tbody>
        </table>
               <h2>
         WITHOUT ERROR - added border to table th and td
       </h2>
       <table class="table table-stripped bordered">
            <tbody>

            <tr class="day-row">
                <td class="center" rowspan="4">1</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">2</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">3</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>

            </tbody>
        </table>
                       <h2>
        ALSO WITHOUT ERROR - different row counts
       </h2>
       <table class="table table-stripped">
            <tbody>

            <tr class="day-row">
                <td class="center" rowspan="4">1</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>


            <tr class="day-row">
                <td class="center" rowspan="4">2</td>
                <td class="center" rowspan="2">projekt</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td class="center" rowspan="4">1.6</td>
                <td class="center" rowspan="4"></td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>
            <tr class="day-row">
                <td class="center" rowspan="2">frontend</td>
                <td>ActivityGroupName object</td>
                <td>None</td>
                <td>0.8</td>
                <td><a>Upravit</a></td>
            </tr>
            <tr class="day-row">
                <td></td>
                <td></td>
                <td></td>
                <td><a>Nový</a></td>
            </tr>

            </tbody>
        </table>
&#13;
&#13;
&#13;