表格边框大小 - CSS/HTML

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6379840/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:08:35  来源:igfitidea点击:

Table border size - CSS/HTML

htmlcsshtml-tableborder

提问by travega

Is it possible to extend a cell's border width/height so that it joins with the border of surrounding table?

是否可以扩展单元格的边框宽度/高度,使其与周围表格的边框连接?

I have this:

我有这个:

<table width="270px" style="border: 1px;">
   <tbody width="270px">
        <tr>
            <th colspan="3" style="border: 1px;">
                Header
            </th>
        </tr>
        <tr>
            <td style="border: 1px;" valign="middle">
                Left-hand cell
            </td>  
            <td valign="middle">
                Right-hand cell
            </td>
            <td>
                Left-hand cell
            </td>
        </tr>
    </tbody>
</table> 

What is happening is the inner borders don't meet the outer border - there is a slight gap.

发生的事情是内部边界与外部边界不相交——有一个轻微的差距。

Can I get these border to meet?

我可以让这些边界相遇吗?

回答by Town

Have a look at CSSborder-collapse.

看看 CSS 。border-collapse

table 
{ 
    border-collapse: collapse; 
}

Also, have a look at this answer on how to achieve cellpaddingand cellspacingin CSS.

另外,看看这个关于如何实现cellpaddingcellspacing在 CSS 中的答案。

From Ant P.'s answer:

... just for completeness:

  • paddingcellpadding
  • border-spacingcellspacing
  • border-collapse→ no HTML equivalent

It's also worth remembering that you can set separate horizontal and vertical values for the CSS ones e.g. border-spacing: 0 1px.

来自 Ant P. 的回答

...只是为了完整性:

  • paddingcellpadding
  • border-spacingcellspacing
  • border-collapse→ 没有等效的 HTML

还值得记住的是,您可以为 CSS 设置单独的水平和垂直值,例如 border-spacing: 0 1px。

回答by kheya

Try this and let me know:

试试这个,让我知道:

<table width="270px" style="border: 1px;" cellspacing="0" cellpadding="0">
   <tbody width="270px">
        <tr>
            <th colspan="3" style="border: 1px;">
                Header
            </th>
        </tr>
        <tr>
            <td style="border: 1px;" valign="middle">
                Left-hand cell
            </td>  
            <td valign="middle">
                Right-hand cell
            </td>
            <td>
                Left-hand cell
            </td>
        </tr>
    </tbody>
</table>