【问题标题】:Cell border change affects whole table markup单元格边框更改影响整个表格标记
【发布时间】:2012-05-26 16:39:14
【问题描述】:

我有下一个样式的表格:

table {
    border-collapse:collapse;
}

td, th {
    height: 20px;
    width: 20px;
    border: 1px solid #000000;
    text-align:center;
}

th {
    border: 0;
}

当我更改一个或几个单元格的边框宽度时,行和列的宽度以及整个表格的宽度都会以未定义的方式发生变化。它不是那么严重,我想完全防止任何视觉变化,除了受影响的单元格的边界。更改这些单元格的宽度或高度无济于事。 如何防止修改表格位置,只更改所需单元格的边框宽度?

JSFiddle


UPD 问题已修复。我只是在表格的右侧和底部添加了两行和两列,并将最后一行和最后一列的边框设置为 2px。

【问题讨论】:

  • 请提供jsfiddle
  • 记住:border:0px 不是border:0
  • 这里是JSfiddle。 JavaScript 根本不起作用,因此您只需单击第 4 行或最后一个单元格中的任何单元格。
  • 好的,border:0px和border:0有什么区别?
  • @javascriptisfuture:没有区别;零就是零,单位是可选的。

标签: html css border cell css-tables


【解决方案1】:

border-collapse:collapse 意味着所有单元格的边框都被混合在一起,因此也采用相同的样式。

See this link

collapse - 表格单元格之间的空间和边框都折叠起来,因此单元格之间只有一个边框并且没有空间。

【讨论】:

    猜你喜欢
    • 2011-03-15
    • 1970-01-01
    • 2016-02-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-06
    • 2022-01-15
    • 2011-01-04
    相关资源
    最近更新 更多