What border type is a table? 1

[skiflyer]

I have a div I want to integrate with my page... it has a border, I want the border to mesh well with the borders on the tables in the page.

What border type should I be using? Nothing seems to look quite right that I've tried.

Ideally want it to work in both IE and Mozilla and all other choices would be nice as well, but at that point I'll be ok if I don't support them on this aesthetic only issue.

 

[BillyRayPreachersSon]

I want the border to mesh well with the borders on the tables in the page.

What border type should I be using?

Define "mesh" and an answer would be easier to give. Do you mean as in the border-collapse CSS property, where adjoining borders are merged into one? If so, AFAIK this can only be achieved with tables (although I could be wrong on this).

Dan

 

[Vragabond]

You haven't told us how the borders look on your page. Ideally, you should define table borders with css and that way you can definitely have them both look alike.

 

[skiflyer]

I haven't told the browser how to border the tables either... I'm just using the table tags with whatever's the default, I was hoping these would be replicatable.

 

[Vragabond]

I'm sorry but I cannot reproduce the table's original borders with css. I would suggest you style all your borders through CSS to ensure the best results. It should not be too difficult. This is the closest I could get to:

<style type="text/css">

table#test {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px outset #cccccc;
  width: 50%;
}

#test td {
  border: 1px solid gray;
  border-color: #cccccc #cccccc gray gray;
  padding: 5px;
}

</style>


<table border="1" cellpadding="5" cellspacing="0" width="50%">
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>
<br />
<table id="test" cellspacing="0">
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
  <tr>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
    <td>Test</td>
  </tr>
</table>
<br />

<div style="width: 50%; height: 50px; border: 2px outset #aaaaaa;"></div>

Mozilla renders them pretty close while IE by default chooses a different color for the border in table.