How to remove row borders in a specific column?

Question

I want to build a HTML table with three columns. In one of these three columns, I want to remove lines from it.

I tried codes like border-style: hidden; padding: 0px; border-style: hidden; padding: 0px; colspan and rowspan but they don't help.

 <table style="width:100%; margin-block-start: 5px;font-size:20px;border: 1px solid black;"> <tr> <th style="padding: 15px;text-align: left;border: 1px solid black;">Tasks</th> <th style="padding: 15px;text-align: left;border: 1px solid black;">Sales Performance</th> <th style="padding: 15px;text-align: left;border: 1px solid black;">Staffs' Annual Leave</th> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Yesterday</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">50</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Today</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">50</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Tomorrow</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Upcoming</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Some other day</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> </table>

my expectation

reality

Answer 1

Try This:

 table { border-collapse: collapse; } th, td { margin: 0px; padding: 15px; border: 1px solid black; } td.no-data { border: 0px; }

 <table style="width:100%; margin-block-start: 5px;font-size:20px;border: 1px solid black;"> <tr> <th>Tasks</th> <th>Sales Performance</th> <th>Staffs' Annual Leave</th> </tr> <tr> <td><i>Yesterday</i></td> <td class="no-data"></td> <td>50</td> </tr> <tr> <td><i>Today</i></td> <td class="no-data"></td> <td>50</td> </tr> <tr> <td><i>Tomorrow</i></td> <td class="no-data"></td> <td>94</td> </tr> <tr> <td><i>Upcoming</i></td> <td class="no-data"></td> <td>94</td> </tr> <tr> <td><i>Some other day</i></td> <td class="no-data"></td> <td>94</td> </tr> </table>

Answer 2

Try to replace inline-style with class or data-attribute

 table { width: 100%; font-size: 20px; border-collapse: collapse; } th { padding: 15px; text-align: left; border: 1px solid black; } td { padding: 15px; border: 1px solid black; } .no-border { border: 0; }

 <table style="width:100%; margin-block-start: 5px;font-size:20px;border: 1px solid black;"> <tr> <th>Tasks</th> <th>Sales Performance</th> <th>Staffs' Annual Leave</th> </tr> <tr> <td> <i>Yesterday</i> </td> <td class=" no-border"></td> <td>50</td> </tr> <tr> <td> <i>Today</i> </td> <td class="no-border"></td> <td>50</td> </tr> <tr> <td> <i>Tomorrow</i> </td> <td class="no-border"></td> <td>94</td> </tr> <tr> <td> <i>Upcoming</i> </td> <td class="no-border"></td> <td>94</td> </tr> <tr> <td> <i>Some other day</i> </td> <td class="no-border"></td> <td>94</td> </tr> </table>

Answer 3

You need to add border-collapse style to the table and use rowspan attribute to span your first <td> . when you rowspan your first <td> , you don't need to add any more <td> tags in the following <tr> s because the first <td> will span all the way down up to the value (number of rows to be spanned) of the rowspan attribute, for example rowspan=5 will span up to the end of your current table.

 <table style="width:100%; margin-block-start: 5px;font-size:20px;border: 1px solid black; border-collapse:collapse"> <tr> <th style="padding: 15px;text-align: left;border: 1px solid black;">Tasks</th> <th style="padding: 15px;text-align: left;border: 1px solid black;" >Sales Performance</th> <th style="padding: 15px;text-align: left;border: 1px solid black;">Staffs' Annual Leave</th> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Yesterday</i></td> <td rowspan='5'</td> <td style="padding: 15px;border: 1px solid black;">50</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Today</i></td> <td style="padding: 15px;border: 1px solid black;">50</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Tomorrow</i></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Upcoming</i></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Some other day</i></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> </table>

Answer 4

You just Replace border-style: hidden; to border:none;

In that column you not set border apply style="border:none;"

Answer 5

It works out just what I wanted after I added some lines of codes:

margin-block-start: 5px;

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

The first part is to lower down the table from the navigation bar. The second part is to get what I expected my table to be.

Thank you for answering my question.

If you want to know rest of the codes, please check Sushil and Nawras's answers.

PS Yes, I am a starter to all of these.

Answer 6

Use border-collapse: collapse; for table tag.

 <table style="width:100%; margin-block-start: 5px;font-size:20px;border: 1px solid black; border-collapse: collapse;"> <tr> <th style="padding: 15px;text-align: left;border: 1px solid black;">Tasks</th> <th style="padding: 15px;text-align: left;border: 1px solid black;">Sales Performance</th> <th style="padding: 15px;text-align: left;border: 1px solid black;">Staffs' Annual Leave</th> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Yesterday</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">50</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Today</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">50</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Tomorrow</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Upcoming</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> <tr> <td style="padding: 15px;border: 1px solid black;"><i>Some other day</i></td> <td style="padding: 15px;border: 1px solid black;border-style: hidden;"></td> <td style="padding: 15px;border: 1px solid black;">94</td> </tr> </table>