Member Avatar for kimmi_baby

Hi,
I understand that it isn't possible to add a border to a <tr>. I've been reading suggestions to add the border to the <td> instead. My problem is that I have a 2 column table and applying the border to <td> leaves a tiny gap between the border. Is there a way to fix this?

  • 3 Contributors
  • 2 Replies
  • 143 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by John_Betong
Member Avatar for simplypixie

To prevent the gap, remove cellspacing from the table (or set it to 0).

Member Avatar for John_Betong

By default TR is an inline element. Here is a KLUDGE to fix your problem:

<style type='text/css'>
    th, tr  { display:inline-block }
    table   {width:352px; margin:2em auto; }
    
    th  {border: double #090; border-width: 4px 0 0 0}
    
    tr  {border: dotted 2px #f00; border-width: 0 3px 3px 3px;}
    
    th, td {width:88px; text-align:center}
  </style>  
</head>
<body>
    
<table>
  <tr>
    <th>tom</th>
    <th>dick</th>
    <th>harry</th>
  </tr>

  <tr>
    <td>tom</td>
    <td>dick</td>
    <td>harry</td>
  </tr> 

  <tr>
    <td>tom</td>
    <td>dick</td>
    <td>harry</td>
  </tr> 
</table>
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.