Am creating a table in HTML with a particular shape, and it pretty much works, except for the top and bottom cells that somehow have space between each other. Was wondering if someone could figure out what I am doing wrong. This bleed happens in IE and FIreFox.
If I get rid of the rounded radius, no bleed. If I get rid of my CSS stylings for input, also no bleed. Can someone help me find out how to fix this?
Thanks
Code: Select all
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" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr >
<td id="LISTROW" >
Hello
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROW" >
</td>
<td >
</td>
</tr>
<tr>
<td id="LISTROWBUTT" >
</td>
<td >
</td>
</tr>