Trying to give table a shape, but cracks appear

HTML-CSS
1

Hello,

Am creating a table in HTML with a particular shape, and it pretty much works, except for two cells that somehow have space between each other. Was wondering if someone could figure out what I am doing wrong.

input[type=text] 
{
  border: 1px solid ;
  padding: 5px;
  font-size: 24px;
  border-color: #808080;
  background-color: #fff;
  width: 100%;
  -webkit-border-radius: 5px;
  padding:5px;
 }



input[type=submit] 
{
    margin-left: 5px;
    padding:5px; 
    background:#ccc; 
    cursor:pointer;
    -webkit-border-radius: 5px;

    border: 0px solid ;
    background-color: #0000ff;
    border-color: #CCCCCC;
    color : #fff;
}


table, th, td {
  border-collapse: collapse;
  
  border: 0px;
} 

table td#LISTROWHEAD  
{
  border-collapse: collapse;
  background-color:white; 
  color:black;
  padding: 5px;
  font-size: 18px;
  border-top-left-radius:6px;
  border-top-left-radius:6px;
  border-top-right-radius:6px;
  border-top-right-radius:6px;
}
table td#LISTROWBUTT  
{
  border-collapse: collapse;
  background-color:white; 
  color:black;
  padding: 5px;
  font-size: 18px;
  border-bottom-left-radius:6px;
  border-bottom-left-radius:6px;
  border-bottom-right-radius:6px;
  border-bottom-right-radius:6px;
}
table td#LISTROW  
{
  border-collapse: collapse;
  background-color:white; 
  color:black;
  padding: 5px;
  font-size: 18px;
}

  <tr>
      <td id="LISTROWHEAD" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr >
      <td id="LISTROW" >
          Hello
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROW" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>
    <tr>
      <td id="LISTROWBUTT" >
          &nbsp;
      </td>
      <td >
      </td>
    </tr>

table

2

maybe some other css bleeding in?
don’t get these lines on my computer …

image

3

You are so correct, I edited the original post and put the input CSS settings there, which if I take away I get no bleed, of course I lose the size I want. Not sure how I can separate the two however.