Remove border of column of a table

Question

1.00/5 (2 votes)

See more:

hi ,
I need code for removal of left and right border of selected column in table
(html table) .

If any change in this partial code is needed it is heartly welcome...

C#

  public void removecolborder()
        {
            mshtmlTable table1 = null;
            mshtmlTableCell cell = null;
            mshtmlTableRow row = null;
            GetTableElement(out table1, out row, out cell);
         
            try
            {
                HtmlElement table = getTableHTMLElement();
                if (table != null)
                {
foreach(mshtml.IHTMLTableRow row in table1.rows)
{
    foreach (mshtml.IHTMLTableCell cell in row.cells)              
                    {
                       row.style=????????????;
                    }

                }
                else
                {
                    throw new HtmlEditorException("Column not selected", "");
                }
            }
            catch (Exception ex)
            {
                // process the standard exception
                OnHtmlException(new HtmlExceptionEventArgs(null, ex));
            }
        }

Posted 30-Jan-15 21:34pm

Ravi_194

Add a Solution

Comments

Sergey Alexandrovich Kryukov 31-Jan-15 3:48am

Not clear. HTML elements or System.Windows.Forms. If both then how? (Using WebBrowser control, for example...)
—SA

Ravi_194 31-Jan-15 4:05am

Thanks for ur reply..
Yes using webbrowser control ...I have to strictly use C# SERGEY.....

Sergey Alexandrovich Kryukov 31-Jan-15 12:10pm

But are you still talking about HTML element "table", as I can see from your sample? And do you output data to the window of WebBrowser control?
But the idea is the same: you have to change the style of each cell in a row...
—SA

Ravi_194 31-Jan-15 12:46pm

yes i want output data to the window of webbrowsr control..
but i could not change the style of cell ..

Sergey Alexandrovich Kryukov 31-Jan-15 13:28pm

Why couldn't you? You can change the style of everything. Perhaps you need to learn how style is defined by CSS and element class working together.
Please see my update to the question, after [EDIT].
—SA

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2015-01-30T21:52:00

You cannot do it the way you are trying. If you look at the table with all the borders, you will clearly see that a border only belongs to the <table> element or to the cell elements (<td>, <th>).

If some borders has to be hidden and then shown, create two different CSS styles and toggle them. If you want to toggle cell elements, you have to get a set of them in a row, and toggle the CSS class for the whole set.

For example, you can write this td classes in your CSS:

CSS

td { border: solid red; }
td.visibleBorder { border-width: 2px; }
td.hiddenBorder { border-width: 0; }

You can toggle between classes "visibleBorder" and "hiddenBorder". This is a very simplified sample, just to illustrate the idea. Rather, you should separately set the properties border-left, border-top, and so on.

One convenient way to do that is using jQuery:
http://api.jquery.com/toggleclass[^],
see also http://api.jquery.com/category/css[^].

Also, jQuery allows you to get an object wrapper representing the whole set of elements chosen by some set of attributes: id, content, order, class and so on: http://api.jquery.com/category/selectors[^].

[EDIT]

So, the idea is to operate cell's properties instead of the row, because it's the cell carries the row's borders.
With WebBrowser control, you can, for example, manipulate border colors to make border invisible/transparent. See the IHTMLTableCell.border* properties:
https://msdn.microsoft.com/en-us/library/aa741764%28v=vs.85%29.aspx[^]

Another approach it to rewrite the whole document or some of its DOM nodes style node. I'm not sure if you need to show and hide some borders dynamically. More usually, the document is formed just once once. But if it has to be dynamic, you can 1) in first place, predefine "hidden" and "visible" classes for the table cells, and modify the set of cell objects, changing its CSS class; this way, CSS <style> node content remains the same at all times; 2) keep the classes in the cell nodes, but change the classes themselves by replacing the whole <style> node of the document. It depends on you goals and preferences. To do so, you need to do DOM manipulations.

[END EDIT]

—SA

jaket-cp · Answer 2 · 2015-02-01T23:09:00

On the css side, some addition information to solution 1.
The style (css) of a cell can be modified by specifying a class for the table row.
Here is an example of such:

CSS

/*set all table cell border*/
/*note: table border not set*/
table td{border:solid 1px green;border-collapse:collapse;padding:5px;}

/*for table with class Highlightable on row hover or row class highlight*/
/*set last child cell no right border width*/
table.Highlightable>tbody>tr:hover td:last-child,
table.Highlightable>tbody>tr.highlight td:last-child{
    border-right-width:0px;
}
/*for table with class Highlightable on row hover or row class highlight*/
/*set first child cell no left border width*/
table.Highlightable>tbody>tr:hover td:first-child,
table.Highlightable>tbody>tr.highlight td:first-child{
    border-left-width:0px;
}
/*for table with class Highlightable on row hover with row class highlight*/
/*set all child cell font colour to blue*/
table.Highlightable>tbody>tr:hover.highlight td{
    color:blue;
}

HTML

<table class="Highlightable">
    <tbody>
        <tr>
           <td>01</td><td>02</td><td>03</td><td>04</td><td>05</td>
        </tr>
        <tr class="highlight">
           <td>01</td><td>02</td><td>03</td><td>04</td><td>05</td>
        </tr>
        <tr>
           <td>01</td><td>02</td><td>03</td><td>04</td><td>05</td>
        </tr>
    </tbody>
</table>

I have not worked with IHTMLTableRow, so not sure if a CssClass can be specified for the table row.
I did find this article "[HOW TO] Dynamically set HtmlTableRow CssClass attribute"[^], but not sure if it is the same thing :)

Here is a jsfiddle I created with addition example: http://jsfiddle.net/th4hwLqu/[^]

Hope it helps out.

Remove border of column of a table

2 solutions

Solution 1

Solution 2

Add your solution here

Preview 0