This site requires JavaScript to be enabled
Knowledge Home | Print

Remove table borders

Share URL:      Article: KB0000384 Published: 2014-10-16 Last modified: 2017-07-29



By default, tables show up with borders. How do I remove the border around the table and each of the cells?


Create and/or add to your site's supplemental.css file

  1. Select New | Files, Folders, and Links from the main menu, and File from the submenu.
  2. Provide System name: supplemental.css and a Parent folder of [/local_resources/css].
  3. Click Submit to save.

Add the following CSS to your supplemental.css page

  1. Navigate to your supplemental.css file, select it, and click the Edit tab.
  2. Enter the following CSS.
    #main_content table#no-table-borders th, 
    #main_content table#no-table-borders td {border: none!important;}
  3. Click Submit to save.

If it isn't already, attach the supplemental.css page to the _Site configuration file (must have a manager role to accomplish this step)

  1. Click on the _Site configuration file.
  2. Click the Edit tab.
  3. Find and expand the "Site settings » Site-specific files » CSS/JS/code for site » Supplemental blocks/files."
  4. Attach your supplemental.css page to the region called "Or, site specific CSS file."
  5. Click Submit to save.

Apply the ID style to your table(s)

  1. Either create or locate your table.
  2. Right click on the table so you see the submenu and select Table Properties.
  3. By default you will be in the General tab, click on the Advanced tab to continue.
  4. In the very first field, ID, type in no-table-borders.
  5. Click Update to apply the ID to your table.
  6. Click Submit to save and review the output.

Have Knowledge Base feedback?

Email with any suggestions, updates, or comments regarding the UC Davis Knowledge Base.