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

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

    Styling a table...


    I'd like to style a table and the cells within with one pix collapsed:

    Code:
    .mainTable {
       border-collapse: collapse;
       border: 2px solid black;
    }
    But this puts the border only around the table and not the cells.

    I don't want this style to effect any other tables so I don't want to do something like this:

    Code:
    table, td {
       border-collapse: collapse;
       border: 2px solid black;
    }
    Can't seem to figure it out...
  2. #2
  3. Lazy Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,385
    Rep Power
    9645
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17
    Harumph...
  6. #4
  7. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2010
    How come you created a second/duplicated post, as you already have this: http://forums.devshed.com/showthread.php?t=976876?
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2016
    Location
    Lakewood, WA
    Posts
    207
    Rep Power
    17
    > How come you created a second/duplicated post, as you already have this: Table borders...

    I don't know. I'm old... Sorry!

    HOWEVER

    I really must be missing something basic. Here is some code:

    Code:
    <html>
    <head>
    <style type="text/css">
    
    table td {
    		   border-collapse: collapse;
    		   border: 1px solid black;
    		}
    
    </style>
    
    </head>
    <body>
    
    <table>
    <tr>
    	<td>aaaa</td>
    	<td>bbbb</td>
    </tr>
    <tr>
    	<td>cccc</td>
    	<td>dddd</td>
    </tr>
    </table>
    
    </body>
    
    </html>
    What I am seeing is each cell is an individual box with space between it and the next cell. Is there a way to "collapse" them all together?
  10. #6
  11. Lord of the Dance
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Oct 2003
    Posts
    4,131
    Rep Power
    2010
    The border-collapse is for the table and the border is for the td (cell).
    Code:
    <style type="text/css">
    
    table  {
    		   border-collapse: collapse;
    }
    
    td {
    		   border: 1px solid black;
    }
    
    </style>
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

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

    only table border then not required inside cell and row border then use

    Code:
    <style>
                 table 
    	     {
    		font-family: arial, sans-serif;
    		border-collapse: collapse;		
    	     }
    
    	     td, th 
    	    {
    		border: 0px solid #dddddd;
    		text-align: left;
    		padding: 8px;
    	    }
    
    	    tr:nth-child(even) 
    	   {
    		background-color: #dddddd;
    	   }
              </style>
              <div style="float:right; margin:-550px 0px 0px 0px;">
    		<table  border="1px" width="650px" >
    		  <tr>
    			<th>Company</th>
    			<th>Contact</th>
    			<th>Country</th>
    		  </tr>
    		  <tr>
    			<td>Alfreds Futterkiste</td>
    			<td>Maria Anders</td>
    			<td>Germany</td>
    		  </tr>
    		  <tr>
    			<td>Centro comercial Moctezuma</td>
    			<td>Francisco Chang</td>
    			<td>Mexico</td>
    		  </tr>
    		  <tr>
    			<td>Ernst Handel</td>
    			<td>Roland Mendel</td>
    			<td>Austria</td>
    		  </tr>
    		  <tr>
    			<td>Island Trading</td>
    			<td>Helen Bennett</td>
    			<td>UK</td>
    		  </tr>
    		  <tr>
    			<td>Laughing Bacchus Winecellars</td>
    			<td>Yoshi Tannamuri</td>
    			<td>Canada</td>
    		  </tr>
    		  <tr>
    			<td>Magazzini Alimentari Riuniti</td>
    			<td>Giovanni Rovelli</td>
    			<td>Italy</td>
    		  </tr>
    		</table>
              </div>

IMN logo majestic logo threadwatch logo seochat tools logo