为什么表格边框没有显示在这个 html 表格中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/799944/
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-28 23:40:50  来源:igfitidea点击:

why is the table border not showing in this html table

html

提问by cgp

I have a simple html table like this: http://jsbin.com/oxiyi

我有一个简单的 html 表,如下所示:http: //jsbin.com/oxiyi

I want to have a border with color #990000 outside the entire table. So I have made a table outside the table and given it border color of #990000. But still I dont see a border color.

我想在整个表格外有一个颜色为 #990000 的边框。所以我在桌子外面做了一张桌子,并给它设置了#990000的边框颜色。但我仍然没有看到边框颜色。

回答by Paolo Bergantino

Tables inside tables! Oh noes! My head hurts.

桌子里面的桌子!哦不!我头疼。

You should be glad that doesn't work, as it is awful markup and should be avoided at all costs. Looking at your HTML code I am noticing a lot of inline properties being set and lack of CSS being used. You should really read up on CSS, as the code you have right now looks more like the code that was being produced in 2000 rather than what we're doing nowadays. In short, however, you can get rid of your outer table and add a style declaration of border: 1px solid #990000;in the table to get the effect you want. This is just the tip of the iceberg, however, and you really should read up on CSS and valid markup before your website self implodes. :)

你应该很高兴这不起作用,因为它是可怕的标记,应该不惜一切代价避免。查看您的 HTML 代码,我注意到设置了很多内联属性并且缺少使用的 CSS。您应该真正阅读 CSS,因为您现在拥有的代码看起来更像是 2000 年生成的代码,而不是我们现在正在做的代码。简而言之,你可以去掉你的外表,在表中添加一个样式声明,border: 1px solid #990000;以获得你想要的效果。然而,这只是冰山一角,您真的应该在网站自爆之前阅读 CSS 和有效标记。:)

回答by cgp

Use the border property with CSS style and give it the color. I got rid of the nested tables in your example as well.

使用 CSS 样式的边框属性并为其指定颜色。我也摆脱了您示例中的嵌套表。

<style>
td {
    border: solid 2px lightgrey;
}
</style>
<table style="border: 5px solid #990000; border-collapse: collapse">

http://jsbin.com/odici

http://jsbin.com/odici

That preserves your borders on your cells...

这保留了你的细胞边界......

回答by u07ch

Probably because the outer table has border set to 0

可能是因为外表的边框设置为 0

Change border =0 to border=1

将边框 =0 更改为边框 = 1

回答by Tyler Rash

A better method would be to remove the outer table and add the border via CSS:

更好的方法是删除外部表格并通过 CSS 添加边框:

<table ... style='border: 1px solid #900'>

Better still, use an external stylesheet to style the table.

更好的是,使用外部样式表来设置表格的样式。

回答by Steven Richards

Several problems:

几个问题:

  1. A <div>would be a better tool for this job
  2. Your outer table has bgcolorspecified, not bordercolor
  3. Your outer table has borderset to 0
  4. You need to also include a <tr>and <td>around the inner table to make your HTML correct
  1. A<div>将是这项工作的更好工具
  2. 您的外部表已bgcolor指定,而不是bordercolor
  3. 您的外部表已border设置为 0
  4. 您还需要在内表周围包含一个<tr>and<td>以使您的 HTML 正确

Like this:

像这样:

<table name='outerTable'>
    <tr>
        <td>
            <table name='innerTable'>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

回答by Nathan Southerland

I can't tell you exactly why your tables are not interacting correctly without seeing your markup, but I do see a problem with your fundamental approach.

我无法确切地告诉您为什么您的表格在没有看到您的标记的情况下无法正确交互,但我确实看到您的基本方法存在问题。

Instead of another table, wrap your table in a DIV tag like this:

而不是另一个表,将你的表包裹在一个 DIV 标签中,如下所示:

<div style="border:solid 1px #990000;"> 
   <your table> 
</div> 

This better adheres to modern standards for HTML/XHTML.

这更好地符合 HTML/XHTML 的现代标准。

Without seeing your code, I can't tell you whether your inner table adheres to best practices or not.

没有看到您的代码,我无法告诉您您的内表是否符合最佳实践。

Hope this helps

希望这可以帮助

回答by squirrel

Try using the following code

尝试使用以下代码

tr .bordered{
      border-bottom:1px solid #000;
    }

the while calling it use

调用它的同时使用

<tr class="bordered"></tr>

回答by onlink

  • Create one custom css file in '/css ' dir, say 'local.css'

    • Add following code in marinelli.info file. stylesheets[all][] = css/local.css

    • Try adding following css code in your custom css (i.e. local.css) file :

    tbody { border-top: 1px solid #CCC; }

    tr, tr.even { background: #dedede; }

    table tr th { background: #757575; }

    tr td, tr th { border: 1px solid white; }

    table tr th, table tr th a, table tr th a:hover { color: white; }

    • Please clear cached data here- /admin/config/development/performance

    Rgrds,

  • 在“/css”目录中创建一个自定义 css 文件,例如“local.css”

    • 在 marinelli.info 文件中添加以下代码。样式表[全部][] = css/local.css

    • 尝试在您的自定义 css(即 local.css)文件中添加以下 css 代码:

    tbody { 边框顶部:1px 实心 #CCC; }

    tr, tr.even { 背景: #dedede; }

    表 tr th { 背景:#757575;}

    tr td, tr th { 边框:1px 纯白色;}

    table tr th, table tr th a, table tr th a:hover { color: white; }

    • 请在此处清除缓存数据-/admin/config/development/performance

    Rgrds,