Is there any possible way to remove the very bottom, top, left and right side lines?

Question

My Code: https://jsfiddle.net/eqhdzz73/25/ Where I have the code placed: http://testblogty678.blogspot.com/

Image: i.imgur.com/3tqGKf6.png

I want to know, is there any possible way to remove the very bottom, top, left and right side lines?

    <table align='center' height='100%'>
      <tr>
        <td valign='middle'>
          <table>
            <tr>
              <td class="one">
    Radio 1
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 2
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 3
                <br/>
                <span class="two">
                </span>
              </td>
            </tr>
            <tr>
              <td class="one">
    Radio 4
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 5
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="one">
    Radio 6
                <br/>
                <span class="two">
                </span>
              </td>
            </tr>
            <tr>
              <td class="two">
    Radio 7
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="two">
    Radio 8
                <br/>
                <span class="two">
                </span>
              </td>
              <td class="two">
    Radio 9
                <br/>
                <span class="two">
                </span>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>

    ------------------------------

td {outline:1px solid blue;}

td.one{
    color: #EB7225;
    line-height:1;
    font-size:30px;
    font-weight:bold;
    padding-top: 0px; 
    padding-right: 50px; 
    padding-bottom: 100px; 
    padding-left: 50px;
  }
  span.two{
    color:#000000; 
    display:inline-block; 
    width: 300px; 
    height: 24px;
    background-color:#E2AB58;
  }

  td.two{
   color: #F984E4;
   line-height:1;
   font-size:30px;
   font-weight:bold;
   padding-top: 0px; 
   padding-right: 50px; 
   padding-bottom: 0px; 
   padding-left: 50px;
 }

Answer 1

You actually added that yourself! So just don't!

Consider this modified example: https://jsfiddle.net/ok3gzxzh/

CSS: td table tr td {outline: 1px solid blue;}

With your original example you added an outline to each table cell, so also the cell of the outer table holding all the inner table. That was the outer line you saw. So if you modify your css rule defining the outline such that it only applies to the cells of the inner table you get the desired result.

Answer 2

use outline like this

td td {
    outline: 1px solid blue;
}

Outline will apply inner inner table columns only.

Answer 3

You applied an outline to the td element. The middle element gets also a border. Just remove it.

Html:

<td valign="middle" id="noborder">

Css:

#noborder{outline:none;}

Answer 4

Do you mean this. Adding border-collapse: collapse to the table will remove the extra line. Updated fiddle

 table { border-collapse: collapse; } td { outline: 1px solid blue; } td.one { color: #EB7225; line-height: 1; font-size: 30px; font-weight: bold; padding-top: 0px; padding-right: 50px; padding-bottom: 100px; padding-left: 50px; } span.two { color: #000000; display: inline-block; width: 300px; height: 24px; background-color: #E2AB58; } td.two { color: #F984E4; line-height: 1; font-size: 30px; font-weight: bold; padding-top: 0px; padding-right: 50px; padding-bottom: 0px; padding-left: 50px; } 

 <table align='center' height='100%'> <tr> <td valign='middle'> <table> <tr> <td class="one"> Radio 1 <br/> <span class="two"> </span> </td> <td class="one"> Radio 2 <br/> <span class="two"> </span> </td> <td class="one"> Radio 3 <br/> <span class="two"> </span> </td> </tr> <tr> <td class="one"> Radio 4 <br/> <span class="two"> </span> </td> <td class="one"> Radio 5 <br/> <span class="two"> </span> </td> <td class="one"> Radio 6 <br/> <span class="two"> </span> </td> </tr> <tr> <td class="two"> Radio 7 <br/> <span class="two"> </span> </td> <td class="two"> Radio 8 <br/> <span class="two"> </span> </td> <td class="two"> Radio 9 <br/> <span class="two"> </span> </td> </tr> </table> </td> </tr> </table> 

Answer 5

just you need to update the td role in your css as the following

td {border: none;}

and add this new role after the above one

td > table td {outline:1px solid blue;}