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 > <td class ='tdinput' > <input type ="text" /> </td > <td class ='tdinput black' > <input type ="text" /> </td >
td.tdinput
{
border:1px solid #000;
}
td.tdinput.black input
{
background:#000;
}
Copy 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 ;
}
.table tr {
margin-bottom :0 ;
overflow :hidden;
height :25px ;
width : 100% ;
padding :0 ;
}
.table tr td {
border :1px solid #000 ;
}
.table input {
width :25px ;
height :25px ;
border :none;
text-align :center;
}
.black {
background :#000 ;
}
Copy 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 ;
}
.table tr {
margin-bottom :0 ;
overflow :hidden;
height :25px ;
width : 100% ;
padding :0 ;
}
.table tr td {
border :1px solid #000 ;
}
.table input {
width :25px ;
height :25px ;
border :none;
text-align :center;
display :block;
}
.black {
background :#000 ;
}
Copy 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:
.table input {
width :25px ;
height :25px ;
border :1px solid #000 ;
text-align :center;
margin :-1px ;
}
Copy Seems to fix it quite well.
Post a Comment for "Input In Table > Td, But Yet Extra Bottom Spacing Between Rows! Internet Explorer"