Input In Table > Td, But Yet Extra Bottom Spacing Between Rows! Internet Explorer

Question

Im using meyer css reset. But I have problem with input in a table. There in extra space between rows:

Solution 1:

Try making the border on the td and not on the input. Give the cells you want black a black class and the others with input the tdinput class. That way, you still get the cells with numbers without borders :)

<td>1</td><tdclass='tdinput'><inputtype="text"/></td><tdclass='tdinput black'><inputtype="text" /></td>


td.tdinput
{
    border:1px solid #000;
}
td.tdinput.black input
{
     background:#000;
}

Solution 2:

You have to take the border off of the .inputs and actually put it on the td's.

Try this

.table {
    border-collapse: collapse;
    border-spacing: 0px;
}
.tabletr {
    margin-bottom:0;
    overflow:hidden;
    height:25px;
    width: 100%;
    padding:0;
}
.tabletrtd {
    border:1px solid #000;
}
.tableinput {
    width:25px;
    height:25px;
    border:none;
    text-align:center;
}
.black {
    background:#000;
}

Solution 3:

It's because inputs are inline elements. add display:block; to your input elements and it should take off the gap.

.table {
border-collapse: collapse;
border-spacing: 0px;
}
.tabletr {
    margin-bottom:0;
    overflow:hidden;
    height:25px;
    width: 100%;
    padding:0;
}
.tabletrtd {
    border:1px solid #000;
}
.tableinput {
    width:25px;
    height:25px;
    border:none;
    text-align:center;
    display:block;
}
.black {
    background:#000;
}

Basically adding display:block; to Catfish's solution as he also makes a valid point about styling both td and input. :)

Solution 4:

The bottom margin is being caused by the way IE is handling your input.

Adding: margin:-1px; such that:

.tableinput {
width:25px;
height:25px;
border:1px solid #000;
text-align:center;
margin:-1px;
   }

Seems to fix it quite well.

Html5 Pros

Input In Table > Td, But Yet Extra Bottom Spacing Between Rows! Internet Explorer

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for "Input In Table > Td, But Yet Extra Bottom Spacing Between Rows! Internet Explorer"