相关疑难解决方法(0)

Firefox中没有显示边框,表格上有边框折叠,位置:tbody上的相对或单元格上的背景颜色

请考虑以下HTML:

<html>
<head>
    <style>
        TABLE.data TD.priceCell
        {
            background-color: #EEE;
            text-align: center;
            color: #000;
        }
    
        div.datagrid table
        {
            border-collapse: collapse;
        }
    
        div.datagrid table tbody
        {
            position: relative;
        }
    </style>
</head>
<body>
    <div id="contents" class="datagrid">
        <table class="data" id="tableHeader">
            <thead>
                <tr class="fixed-row">
                    <th>Product</th>
                    <th class="HeaderBlueWeekDay">Price</th>
                    <th class="HeaderBlueWeekDay">Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr style="font-style: italic;">
                    <td>Keyboard</td>
                    <td class="priceCell">20</td>
                    <td style="border-right: #3D84FF 1px solid; border-left: #3D84FF 1px solid;" class="priceCell">2</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

请注意,最后一个单元格的内联样式具有左边框和右边框.你(或至少我)会期望这是可见的.在IE中,情况就是这样.但在Firefox(6)中,事实并非如此.你可以通过以下方式解决

div.datagrid table tbody在CSS中删除相对位置
更改div.datagrid table tbody到div.datagrid …

css firefox border

Pet*_*ter

2016 09-27

74
推荐指数

4
解决办法

4万
查看次数

为什么cellspacing和cellpadding不是CSS样式

我不知道为什么这么困扰我,但是当我创建网站时,我总是尝试用CSS做我所有的造型.但是,当我使用表时,我总是要记住要做的一件事是添加cellspacing ="0"和cellpadding ="0"

为什么没有CSS属性来覆盖这些过时的HTML 4属性？

html css html-table cellspacing cellpadding

Rya*_*ith

2016 09-15

50
推荐指数

3
解决办法

4万
查看次数

为什么box-sizing在table vs div上的表现不同？

这是HTML:http://jsfiddle.net/jC8DL/1/

<div style='width:300px;border:1px solid green'>
  <div>Outer div</div>
  <div style='width:100%;border:1px solid red;margin:10px;'>
    Inner div, 10px margin.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;'>
    Inner div, 10px padding.
  </div>
  <div style='width:100%;border:1px solid red;padding:10px;box-sizing:border-box'>
    Same, with box-sizing: border-box
  </div>
  <table style='width:100%;border:1px solid red;padding:10px;'>
    <tr><td>Inner table, 10px padding</td></tr>
  </table>
</div>

Run Code Online (Sandbox Code Playgroud)

它在我的Chrome中看起来像这样:

在此输入图像描述