Member Avatar for davy_yg

Hello,

I am trying to place border colors around the whole table including inside the tables. Yet, what happen is the border only appears outside the table like a box. There are no borders inside the table. How to place borders including inside the tables?

image_gallery.php

<!-- border="1" -->
                <table style="margin: 50px 0 0 -150px; position: relative;" id="admintable"  cellpadding="2" cellspacing="0">

main.css

table{
border: 1px solid #e2e0e0;
}
Edited by davy_yg
  • 5 Contributors
  • 4 Replies
  • 321 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

Quick diagnosis: a border on the table element alone only draws the outer box; the internal grid lines come from borders on the cells (td/th) or from how the table renders its collapsed/separate borders. Also note a selector mismatch in the original markup — the table’s id is admintable, so rules targeting #admin won’t affect it. This explains why an outer frame appears but no internal lines (see suggestions from and ).

A clean, reliable pattern that avoids “double” lines is to collapse borders and draw a single edge per cell, then close the grid on the last row/column:

#admintable {
  border-collapse: collapse;
  border: 1px solid #e2e0e0;   /* outer frame */
}
#admintable th,
#admintable td {
  border-top: 1px solid #e2e0e0;
  border-left: 1px solid #e2e0e0;
  padding: 6px 8px;
}
#admintable tr:last-child td  { border-bottom: 1px solid #e2e0e0; }
#admintable th:last-child,
#admintable td:last-child { border-right: 1px solid #e2e0e0; }

Alternate technique: keep border-collapse: separate and use outline on cells to create subtle inner lines without changing collapse behavior:

#admintable { border-collapse: separate; border-spacing: 0; border: 1px solid #e2e0e0; }
#admintable th, #admintable td { outline: 1px solid rgba(0,0,0,0.06); outline-offset: -1px; padding: 6px; }

Troubleshooting checklist (common causes seen in this thread): the stylesheet order or a framework (Bootstrap’s .table) can override rules; inline styles have higher specificity; th needs the same rules as td (as noted); cellspacing/cellpadding are legacy — prefer border-spacing and CSS padding; a small typo (like table-collspace) breaks rules (see ). Developer tools (Computed Styles) reveal which rule is winning and will show whether the targeted selector matches the real element.

Recommended Answers

All 4 Replies

Member Avatar for hericles

just go with

#admin {
    border: 1px solid #f6f6f6;
}

Seeing as you have already specified an ID you don't need to include the table selector. It means the CSS is trying to style a table that is a child of #admin

Member Avatar for minitauros

I think you may want to style the <td> borders instead of the <table> borders to get what you're looking for. So:

table#adminTable
td {
    border: 1px solid #e2e0e0;
}
Member Avatar for UK-1991

Hello below css code will give the border to the table

table {
    table-collspace:collspace;
    border:1px solid #e2e0e0;
}

if you want to give borders to td you can do the following

table td {
    border:1px solid #e2e0e0;
}

Hope this will help you out

Member Avatar for Member #120589

If you have a semantic table: <tbody> with <td> and <thead> with <th> - don't forget to include the th in your css.

Example:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#admin{
    border-collapse:collapse;
}
#admin th, #admin td{
    border: 1px #e2e0e0 solid;
}
</style>
</head>

<body>

<table id="admin">
    <thead>
        <tr>
            <th>Heading One</th>
            <th>Heading Two</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data content one</td>
            <td>Data content two</td>
        </tr>
    </tbody>
</table>
</body>
</html>

You could even do this:

#admin *{
    border: 1px blue solid;
}

But that's horrible. :)

Edited by Member #120589
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.