无法删除Wordpress网站上的表格边框

Question

It works if I put the code into a blank HTML file on my desktop, but not on the Website. I have always had trouble removing table borders from Wordpress Websites. This is the code that I have so far:

HTML

  <table border="0" cellspacing="0" cellpadding="0">
   <td>
      <a href="http://graysonforeman.com/portfolio/websites/">
      <img src="http://graysonforeman.com/wp-content/uploads/2016/03/mrs.jpg" height="175"     width="175"></a>
   <td><a href=" http://graysonforeman.com/portfolio/writing/">
      <img src="http://graysonforeman.com/wp-content/uploads/2016/03/pen_paper_2-512.png" height="175" width="175"></a>
   </td>
   <td><a href="http://graysonforeman.com/portfolio/programming/">
      <img src="http://graysonforeman.com/wp-content/uploads/2016/03/Java.png" height="175" width="175"></a>
   </td>
   </tr>
   <tr>
      <td>Websites</td>
      <td>Writing</td>
      <td>Programming</td>
</table>

I thought about editing the style sheet, but I do not want to mess up the rest of my theme. Thank you for any help.

Answer 1

Try using the !important attribute to the style, something like this:

<table style="border: 0 !important;" cellspacing="0" cellpadding="0">

The !important rule is a way to make your CSS cascade but also have the rules you feel are most crucial always be applied. A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.

See further details here : What does !important in CSS mean?

Answer 2

Try clearing the border on your table and td s

<style type='text/css'>
table.no_border, table.no_border td{
border:0 !important;
}
</style>
<table border="0" cellspacing="0" cellpadding="0" class='no_border'>
   <tr>
      <td>
         <a href="http://graysonforeman.com/portfolio/websites/">
            <img src="http://graysonforeman.com/wp-content/uploads/2016/03/mrs.jpg" height="175"     width="175">
         </a>
      </td>
      <td>
         <a href=" http://graysonforeman.com/portfolio/writing/">
            <img src="http://graysonforeman.com/wp-content/uploads/2016/03/pen_paper_2-512.png" height="175" width="175">
         </a>
      </td>
      <td>
         <a href="http://graysonforeman.com/portfolio/programming/">
            <img src="http://graysonforeman.com/wp-content/uploads/2016/03/Java.png" height="175" width="175">
         </a>
      </td>
   </tr>
   <tr>
      <td>Websites</td>
      <td>Writing</td>
      <td>Programming</td>
   </tr>
</table>

I also fixed your tr s and one td

Answer 3

You can use !important to override the rest. That is the highest priority order.

   <table border="0 ! important" cellspacing="0" cellpadding="0"       class="no_border">

to override another css priority . I have a video for this https://youtu.be/NqDb9GfMXuo