Firefox 上表格中边框折叠的不同厚度 [英] Different thicknesses for the border-collapse in a table on firefox
问题描述
在 Firefox 中,我有一个表格,当应用边框折叠时,边框的厚度不同.但是这个问题在 Chrome 中不会出现.
表格的 HTML 和 CSS 代码:
//HTML<div id="divTabela"><table width="100%" cellpadding="4" border="1" name="tabelainfo" id="tabelainfo" class="bordasimples"><tr id="titulotabela"><th colspan="1" rowspan="1">数据初始</th><th colspan="1" rowspan="1">数据最终</th><th colspan="1" rowspan="1">分发服务器</th><th colspan="1" rowspan="1">日程</th><th colspan="1" rowspan="1">Ver Detalhes</th></tr><tr id="corpotabela"><td align="center" colspan="1" rowspan="1">####</td><td align="center" colspan="1" rowspan="1">####</td><td align="center" colspan="1" rowspan="1">####</td><td align="center" colspan="1" rowspan="1"></td><td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><a href="#"><div></div></a></div></td></tr><tr id="corpotabela"><td align="center" colspan="1" rowspan="1">####</td><td align="center" colspan="1" rowspan="1">####/td><td align="center" colspan="1" rowspan="1">####</td><td align="center" colspan="1" rowspan="1"></td><td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><a href="#"><div></div></a></div></td></tr></tbody><br>//CSStable.bordasimples {边界折叠:折叠;}table.bordasimples tr td {border:1px solid;}table.bordasimples tr th {border:1px solid;}#tabelainfo {填充顶部:0px;字体大小:12px;字体系列:Calibri;文本对齐:对齐;边框顶部颜色:#FFFFFF;边框右颜色:#FFFFFF;边框底部颜色:#FFFFFF;左边框颜色:#FFFFFF;颜色:#083c06;文字装饰:无;}
请参阅下图中的表格行:
解决方案 我只是改变了 CSS 代码就解决了这个问题:
table.bordasimples {边框间距:0px;边框:1px 实心 #D2DDD4;}table.bordasimples tr td,table.bordasimples tr th{边框:1px 实心 #D2DDD4;}
我将边框折叠替换为边框间距并更改了边框的颜色,现在我的表格是我想要的方式,并且布局更好.
谢谢大家!
In Firefox, I have a table which when border-collapse is applied the borders are in different thicknesses. But this problem doesn't occours in Chrome.
The HTML and CSS code of the table:
//HTML
<div id="divTabela">
<table width="100%" cellpadding="4" border="1" name="tabelainfo" id="tabelainfo" class="bordasimples">
<tbody>
<tr id="titulotabela">
<th colspan="1" rowspan="1">Data Inicial</th>
<th colspan="1" rowspan="1">Data Final</th>
<th colspan="1" rowspan="1">Distribuidor</th>
<th colspan="1" rowspan="1">Agendar</th>
<th colspan="1" rowspan="1">Ver Detalhes</th>
</tr>
<tr id="corpotabela">
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1"></td>
<td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><a href="#"><div></div></a></div></td>
</tr>
<tr id="corpotabela"><td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1">####/td>
<td align="center" colspan="1" rowspan="1">####</td>
<td align="center" colspan="1" rowspan="1"></td>
<td align="center" colspan="1" rowspan="1"><div title="Ver Detalhes"><a href="#"><div></div></a></div></td>
</tr>
</tbody>
</table>
<br>
</div>
//CSS
table.bordasimples {border-collapse: collapse;}
table.bordasimples tr td {border:1px solid;}
table.bordasimples tr th {border:1px solid;}
#tabelainfo {
padding-top: 0px;
font-size: 12px;
font-family: Calibri;
text-align: justify;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #083c06;
text-decoration: none;
}
See the table rows in the image below:
解决方案 I solved the problem just changing the CSS code:
table.bordasimples {
border-spacing: 0px;
border:1px solid #D2DDD4;
}
table.bordasimples tr td, table.bordasimples tr th
{border:1px solid #D2DDD4;}
I replaced the border-collapse for border-spacing and changed the color of borders, now my table is the way I wanted, and with a better layout.
Thanks everyone!
这篇关于Firefox 上表格中边框折叠的不同厚度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆