CODEWITHSUNDEEP
htmlcss
user6502278
user6502278

Reputation:

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

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;
 }

Upvotes: 0

Views: 63

Answers (5)

mustafa-elhelbawy
mustafa-elhelbawy

Reputation: 530

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;}

Upvotes: 0

Mani
Mani

Reputation: 2655

use outline like this

td td {
    outline: 1px solid blue;
}

Outline will apply inner inner table columns only.

Upvotes: 1

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 0

arkascha
arkascha

Reputation: 42915

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.

Upvotes: 3

Jonas Wilms
Jonas Wilms

Reputation: 138257

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;}

Upvotes: 0

Related Questions