Question

I’m currently migrating a Legacy Web Application. The original source code define the site look and feel with presentation attributes. For example, this HTML table has a nice-looking border:

<table margin="0" padding="0" width="100%" cellspacing="0"
    cellpadding="0" border="1" bgcolor="#ffffff"
    border-collapse="collapse" list-style-type="circle">

However, I’m trying to remove all that and start using CSS to define the look and feel of the page. So, I define this style:

table.exteriorTable {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border-spacing: 0px;
    padding: 0px;
    border: 1px;
    background-color: #ffffff;
    border-collapse: collapse;
    list-style-type: circle;
}

And apply it to the table using this:

<table class="exteriorTable">

Edit:

Also tried including border-width attribute and the border won’t appear:

table.exteriorTable {
    margin: 0px;
    padding: 0px;
    width: 100%;
    border-spacing: 0px;
    padding: 0px;
    border-width:1px;
    background-color: #ffffff;
    border-collapse: collapse;
    list-style-type: circle;
}

Firebug said that the style is applied to the table, but the border is non-existing. What am I doing wrong?

Answer 1

add border-style:solid;

table.exteriorTable {
        margin: 0px;
        padding: 0px;
        width: 100%;
        border-spacing: 0px;
        padding: 0px;
        border-width: 1px;
        border-style:solid;
        background-color: #ffffff;
        border-collapse: collapse;
        list-style-type: circle;
    }