Thread: Table Styling

    #1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    155
    Rep Power
    17

    Table Styling


    This is about table styling. First of all yes, it's tabular data...

    I have an "outer" table with some styling such as padding, font sizes, and border collapse.

    I also have another, second table "imbedded" in the "outer" table in a cell.

    How can I make it so the second table does not inherit any styling from its container, the "outer" table?
  2. #2
  3. Forgotten Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,109
    Rep Power
    9644
    Use >s to restrict rules to immediate children in the outer table.
    Code:
    table#outer-table-id-or-whatever > tbody > tr > td
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Location
    Ahmedabad
    Posts
    17
    Rep Power
    0
    Hi.

    You are first creating id in css in between define border ,padding, font sizes, and border collapse and this id using in second table .you can check below

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Table</title>
    <style>
    	table,tr,td 
        {	
        	border: 1px solid black;
        	border-collapse: collapse;
        }
    	table#t01 
        {
        	padding:10px;
            font-size:24px;
        	background-color: #f1f1c1;
            border-collapse: collapse;
    	}
    </style>
    </head>
    <body>
    
    <table>
    	<tr>
        	<td>First Name</td>
            <td>Last Name</td>
        </tr>
        <tr>
        	<td>jon</td>
            <td>Smith</td>
        </tr>
    </table>
    
    
    <table id="t01">
    	<tr>
        	<td>First</td>
            <td>Last Name</td>
        </tr>
        <tr>
        	<td>Brad</td>
            <td>Pitt</td>
        </tr>
    </table>
    
    </body>
    </html>
    Thanks.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2010
    Location
    Gujarat, India
    Posts
    14
    Rep Power
    0
    Here you go, check the demo on below codepen
    A Pen by Aslam Doctor

IMN logo majestic logo threadwatch logo seochat tools logo