How to Remove Row Borders in a Specific Column

How to remove row borders in a specific column?

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>

CSS: How to eliminate border for a particular row/column in the table

Try something like

#tblContent tr:first-child > td:first-child {
  border-top-color: transparent;
  border-left-color: transparent;
}

#tblContent {  border: 1px solid black;  border-collapse: collapse;  margin-top: 20px;}#tblContent td {  border: 1px solid black;  text-align: center;  font-size: small;}#tblContent tr:first-child > td:first-child {  border-top-color: transparent;  border-left-color: transparent;}

<table id="tblContent" style="width:1000px;">  <tr>    <td colspan="5">Row 1 - Column1</td>    <td colspan="4">Row1 - Column1=2</td>  </tr>  <tr>    <td>Foo</td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>  </tr></table>

How to hide the border for specified rows of a table?

Use the CSS property border on the <td>s following the <tr>s you do not want to have the border.

In my example I made a class noBorder that I gave to one <tr>. Then I use a simple selector tr.noBorder td to make the border go away for all the <td>s that are inside of <tr>s with the noBorder class by assigning border: 0.

Note that you do not need to provide the unit (i.e. px) if you set something to 0 as it does not matter anyway. Zero is just zero.

table, tr, td {  border: 3px solid red;}tr.noBorder td {  border: 0;}

<table>  <tr>    <td>A1</td>    <td>B1</td>    <td>C1</td>  </tr>  <tr class="noBorder">    <td>A2</td>    <td>B2</td>    <td>C2</td>  </tr>  <tr>    <td>A3</td>    <td>A3</td>    <td>A3</td>  </tr></table>

How can I remove the border from one column of an HtmlTable AND the part of the encompassing table that touches it?

You can use :last-child selector:

table tr td:last-child {
border: none;
}

http://www.w3schools.com/cssref/sel_last-child.asp

Removing border from table cells

Just collapse the table borders and remove the borders from table cells (td elements).

table {
    border: 1px solid #CCC;
    border-collapse: collapse;
}

td {
    border: none;
}

Without explicitly setting border-collapse cross-browser removal of table cell borders is not guaranteed.

Issue removing border from one column in primefaces table

Other classes for header and row give borders too, so you have to get rid of them like this (give your panelGrid class noBroder like this <p:panelGrid styleClass="noBorder">)

.noCellBorder, table.noBorder thead tr.ui-widget-header, table.noBorder .ui-panelgrid-even, table.noBorder .ui-panelgrid-odd {
     border: none !important;
}

But is gives black borders for other cells, don't know if you like it.

How to remove td border with html?

To remove borders between cells, while retaining the border around the table, add the attribute rules=none to the table tag.

There is no way in HTML to achieve the rendering specified in the last figure of the question. There are various tricky workarounds that are based on using some other markup structure.

How to remove lines between cells in MUI Table

As mentioned by Soothran in the comments, this is controlled by the bottom border of TableCell. Below is one way to customize this.

import MuiTableCell from "@material-ui/core/TableCell";

const TableCell = withStyles({
  root: {
    borderBottom: "none"
  }
})(MuiTableCell);

Edit Table no lines

How to Remove Row Borders in a Specific Column