Geek Answers Handbook

Why the table border is not displayed in this html table

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

I want to have a border with color # 990000 outside the whole table. So I made a table outside the table and gave it a border color of # 990000. But still, I don't see the border color.

+4
source share
8 answers

Tables inside tables! Oh well! I have a headache.

You should be glad that this does not work, as this is terrible markup and should be avoided at all costs. Looking at your HTML code, I notice that many built-in properties are set and not used by CSS. You really have to read CSS, because the code you are using now is more like the code that was released in 2000, and not what we are doing now. In short, you can get rid of your external table and add a border: 1px solid #990000; style declaration to the table border: 1px solid #990000; to get the desired effect. However, this is just the tip of the iceberg, and you really need to read the CSS and the actual markup before your site gets hacked. :)

+16
source

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

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

http://jsbin.com/odici

This saves your borders on your cells ...

+9
source

Probably because the outer table has a border set to 0

Change border = 0 to border = 1

+2
source

The best way would be to delete the outer table and add the border through CSS:

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

Even better, use an external style sheet to style the table.

+2
source

A few problems:

  • A <div> will be the best tool for this work.
  • Your external bgcolor table does not specify bordercolor
  • In your outer border table set to 0
  • You need to also include <tr> and <td> around the inner table, make your HTML right

Like this:

 <table name='outerTable'> <tr> <td> <table name='innerTable'> <tr> <td></td> <td></td> </tr> </table> </td> </tr> </table>
+2
source

I can’t say for sure why your tables do not interact correctly without seeing the markup, but I see a problem with your fundamental approach.

Instead of another table, wrap the table in a DIV tag as follows:

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

It better complies with modern HTML / XHTML standards.

Without seeing my code, I cannot say whether your internal table adheres to best practices or not.

Hope this helps

0
source

  • Create one custom css file in the '/ css' directory, for example 'local.css'

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

    • Try adding the following css code to your own css file (e.g. local.css):

    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 {white; }

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

    Rgrds,

0
source

Try using the following code

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

when calling it use

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

More articles:


All Articles