CSS HTML: format only 1 table in CSS

janhoedt
janhoedt used Ask the Experts™
on
Hi,

How do I format a certain table in css (like this: https://www.w3schools.com/css/tryit.asp?filename=trycss_table_border_divider), while leaving alone other tables in my html?

J.
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Dustin SaundersCo-Founder and Chief Architect
Top Expert 2016

Commented:
You can create a new css class and assign it to the specific table, or you could use the style attribute on the table itself to customize.
Hi,

You can use class="custom1" or class with  id="custom2"

<table class="custom1">
    <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

.custom1 td {
    border-style:solid;
    border-top:thick double red;
}

Open in new window


<table id="custom2" >
  <tr>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

#custom2 td {
    border-style:solid;
    border-top:thick double blue;
}

Open in new window


I recommend you to check Datatables it come with great and useful widget
https://datatables.net/

Author

Commented:
I'm explicitely mentionig the example

<style>
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
</style>

You only mention the table but what about the th and td

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial