CSS Padding param is not loading - html

Question

This is a table (tag)
Where first column holds username
second column holds content for this particular topic
I've made a css for the table and definition within should set the padding to 0.
However, I noticed padding: 0px 0px; has no effect
Browser: Chrome
CSS for the topic
.TOPIC_STYLE {
border-collapse: collapse;
border:0px solid black;
padding:0px 0px;
font-family: '华康少女文字 - Kelvin';
font-size: 18px;
color: #819FF7;
}
Here is the code for table: <table class=TOPIC_STYLE align=left>
2016-08-13 - Complete set of code is lost along with my old laptop.
Goal: Eliminate the white space in the red circle.
Other CSS I have for table:
.TOP_LEFT {
background-image: url(top_Left.png);
background-repeat: no-repeat;
}
.TOP_RIGHT {
background-image: url(top_Right.png);
background-repeat: no-repeat;
}
.VERTICAL_LEFT {
width: 150px;
height: 30px;
text-align: center;
background-image: url(vertical_Left.png);
background-repeat: repeat-y;
}
.VERTICAL_RIGHT {
width: 700px;
height: 30px;
background-image: url(vertical_Right.png);
background-repeat: repeat-y;
}
.BOTTOM_LEFT {
width: 150px;
height: 40px;
background-image: url(bottom_Left.png);
background-repeat: no-repeat;
}
.BOTTOM_RIGHT {
width: 700px;
height: 40px;
text-align: center;
background-image: url(bottom_Right.png);
background-repeat: no-repeat;
}
Solution:
Pictures was indeed used to create the border, which was unnecessary since CSS already provided border property for that purpose.
Therefore all related pictures can be shelved and use border property instead.
Similarly, border-left, right, top, bottom can also be used.
table {
border: 2px solid red;
}

Answer 1

Your background image isn't wide enough to cover all the space without repeating. For .TOP_LEFT, change background-repeat: to repeat-x; and edit a new image to be much taller and wider.
But if I were in your shoes, I'd just handle that effect as a border. Take off all of the background images and add these rules:
table { border: 2px solid blue; border-collapse: collapse; }
tr { border: 2px solid blue; }

Answer 2

Not sure why your class name has a dollar sign in front of it. Try this:
<table class="TOPIC_STYLE">

Answer 3

<table class="TOPIC_STYLE" align="left">
They should be look like this..Are you getting the same problem still ??