CODEWITHSUNDEEP
htmlcss
user1335654
user1335654

Reputation:

How to remove few td border in HTML

    <table border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                      <tr>
                        <td class="w25">1</td>
                        <td class="w25">2</td>
                        <td class="w25">3</td>
                        <td class="w25">4</td>
                      </tr>
                      <tr >
                        <td class="w25">5</td>
                        <td colspan="2" class="w50 noBorder">6</td>
                        <td class="w25">7</td>
                      </tr>
                      <tr class="">
                       <td class="w25">8</td>
                        <td colspan="2" class="w50 noBorder">9</td>
                        <td class="w25">10</td>
                      </tr>
                       <tr>
                        <td class="w25">11</td>
                        <td class="w25">12</td>
                        <td class="w25">13</td>
                        <td class="w25">14</td>
                      </tr>
                    </table>

I am not able to remove only middle td, tr borders. I would like to display the like this. All 12 side box size should be same. Please help me display using table or div. 

--------------------------------------
|        |         |        |        |
|        |         |        |        |
|        |         |        |        |
|-------------------------------------
|        |                  |        |
|        |                  |        |
|        |                  |        |
----------                  ----------
|        |                  |        |
|        |                  |        | 
|        |                  |        |
--------------------------------------
|        |         |        |        |
|        |         |        |        |
|        |         |        |        |
--------------------------------------

Upvotes: 2

Views: 77

Answers (2)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Rather than defining border on table element border="1" define in td and you may be able to remove the border on particular td like below:

#table1 td{
  border: 1px solid #000;
  }
#table1 td.noBorder{
  border: none;
  }
<table id="table1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                      <tr>
                        <td class="w25">1</td>
                        <td class="w25">2</td>
                        <td class="w25">3</td>
                        <td class="w25">4</td>
                      </tr>
                      <tr >
                        <td class="w25">5</td>
                        <td colspan="2" class="w50 noBorder">6</td>
                        <td class="w25">7</td>
                      </tr>
                      <tr class="">
                       <td class="w25">8</td>
                        <td colspan="2" class="w50 noBorder">9</td>
                        <td class="w25">10</td>
                      </tr>
                       <tr>
                        <td class="w25">11</td>
                        <td class="w25">12</td>
                        <td class="w25">13</td>
                        <td class="w25">14</td>
                      </tr>
                    </table>

Upvotes: 1

Abdulla Nilam
Abdulla Nilam

Reputation: 38584

just use this css

     <style type="text/css">
        td{
            border: solid 1px red;
        }
        .noBorder
        {
            border: 0px;
        }
    </style>

image

HTML Border Styles

Upvotes: 1

Related Questions