Share via


Remove a table border WITHOUT Designer

Question

Friday, October 19, 2012 3:25 PM

Hello. I've added a basic table to a content-editor webpart, and SharePoint has thoughtfully given it a default border I can't get rid of. (There's no "border" controls on the Table tab.)

I have the depressing feeling I'll need to look at source code to fix this, but I'm not a programmer, so HTML is so much gibberish to me. Can anyone suggest a place in this stuff where I can copy and paste some sort of "no borders" command?

<table width="100%" class="ms-rteTable-default" cellspacing="0" style="height: 106px; font-size: 1em"><tbody><tr class="ms-rteTableHeaderRow-default"><th class="ms-rteTableHeaderFirstCol-default" rowspan="2"><div style="text-align: left; font-weight: normal"><img alt="RA2_logo.png" src="/ImagePath/RA2_logo.png" style="margin: 5px; width: 311px; height: 85px"/></div>

All replies (12)

Friday, October 19, 2012 8:54 PM ✅Answered | 1 vote

The Content Editor Web Part is writing the code it thinks you want and is applying styles that it thinks you want. The only way to change this is to edit the styles with SharePoint Designer.

If you have access to the HTML Form Web Part (under the Forms section) you can add whatever content you need and it will not rewrite the code.

I know that you are not an HTML coder, so you could do what you want to in the Content Editor Web Part, get it looking like you want it (with borders), then take the HTML that it generates and put it into the HTML Form Web Part. Remove the javaScript that is already in the HTML Form Web Part first.

THEN you should be able to add that border="0" attribute into the <table> tag and have it work.

Marlene Lanphier MCTS


Friday, October 19, 2012 9:27 PM ✅Answered | 1 vote

The border is being added by the classes used in the TABLE, TR and TH tags. Do you need these? If yes, then you will need to override the styles on each one. Otherwise, just delete the class attributes and the border will be gone.

Mike Smith TechTrainingNotes.blogspot.com my SP customization book


Friday, October 19, 2012 3:43 PM | 1 vote

You could try adding [Border="0"] without the brackets after [<Table ] at the beginning.

Paul Turner http://redmanta.co.uk/blog Twitter: @RedMantaUK MCTS:WSS,MOSS,2010 MCITP:2010.
Please remember to click "Propose As Answer" if a post solves your problem or "Vote As Helpful" if it was useful.


Friday, October 19, 2012 3:51 PM | 1 vote

Micrsoft doesn't help matters by adding in their own code to the HTML, either.

Try this:

<table width="100%" cellspacing="0" border="0"><tr ><th rowspan="2"><div style="text-align: left; font-weight: normal"><img alt="RA2_logo.png" src="/ImagePath/RA2_logo.png" style="margin: 5px; width: 311px; height: 85px"/></div></th></tr></table>

after you save the webpart, MS may go back and add those classes back into the HTML tags, but it should still work.

Marlene Lanphier MCTS

I tried to bold the attribute border="0" but it didn't come out that way. Add border="0" to the <table> HTML tag.


Friday, October 19, 2012 4:25 PM

Hmm, I tried both options but the border is still there. It looks like it may be one of those 'row-spacing/column-spacing' type borders.


Monday, October 22, 2012 1:06 PM

The HTML Forms trick worked! Thanks so much!


Wednesday, October 24, 2012 5:45 PM | 5 votes

Easiest way to hide the borders for a table...

  1. Select the table
  2. Click the "Design" tab at the top
  3. Click the "Styles" button
  4. Select "Table Style 1 - Clear"

Friday, May 16, 2014 6:41 AM | 1 vote

Ltl_Mike, I selected "Table Style 1 - Clear" while testing around and that removed my borders. But now I want the borders back. Do you or anyone else know how I do that?


Tuesday, July 15, 2014 9:51 PM

That cleared the border as I needed - but it also vertically center aligned the web parts in the table. Anyone know how to override?


Thursday, September 18, 2014 8:42 PM

Yep, I am having exact same issue. Three columns in one row table. Web part in column 1 has issue, and I can see column 2 has issue. Web Part in column 3 does not have issue, is at top of cell. No extra spaces in columns 1 and 2.

border="0" did not fix.

SharePoint Designer showed some divs in column 1 above the web part, but removing these did not fix. It did fix it visually in SPD (meaning, the web part moved up to cell's top visually in SPD Design View, aligning with web part in column 3) but not in browser. And column 2 did not have any divs.

Also using SPD, cell vertical alignment (did for every cell in table) = top did not fix.

There is no spacing code #&160; in html when viewing via browser, so nothing to remove that way.

Sooo aggravating. What else to try?

Joan


Thursday, September 18, 2014 9:46 PM

I think I found a fix - worked for me. You can do in browser and the page won't deviate from site template as with SPD. When editing page in browser, on Formet Text tab, click on HTML code to edit it.

Find the desired table and for each column, find and replace rowspan="1" colspan="1" with valign="top"

Example:

Before top alignment:

<th class="ms-rteTableHeaderLastCol-0" rowspan="1" colspan="1" style="text-align: left; width: 34%">

After top alignment:

<th class="ms-rteTableHeaderLastCol-0" valign="top" style="text-align: left; width: 34%">

So, for example, a cell with a web part in it, full code looks like:

<th class="ms-rteTableHeaderLastCol-0" valign="top" style="text-align: left; width: 34%"><div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"><div class="ms-rtestate-notify  ms-rtestate-read ac8b5670-0dea-4433-a6a5-61e3b993f531" id="div_ac8b5670-0dea-4433-a6a5-61e3b993f531" unselectable="on"></div>

Joan


Wednesday, February 4, 2015 4:08 PM

Ltl_Mike, I selected "Table Style 1 - Clear" while testing around and that removed my borders. But now I want the borders back. Do you or anyone else know how I do that?

Perfect solution