вход в таблицу> тд, но все же дополнительный нижний интервал между строками!Internet Explorer

Question

Я использую meyer css reset .Но у меня проблема с вводом в таблицу.Есть дополнительное пространство между строками:

<table class="table" cellpadding="0" cellspacing="0" border="0">
 <tr>
  <td>&nbsp;</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
  <td>7</td>
  <td>8</td>
  <td>9</td>
  <td>10</td>
</tr>
<tr>
  <td>1</td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text" class="black"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
 </tr>
 <tr>
  <td>2</td>
  <td><input type="text" /></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
  <td><input type="text" class="black"/></td>
  <td><input type="text"/></td>
  <td><input type="text"/></td>
</tr>
</table>

и css:

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

Почему в Internet Explorer есть дополнительный нижний интервал (я ненавижу, т.е.*

Answer 1

Попробуйте сделать границу на тд, а не на входе.Дайте ячейки, которые вы хотите, чтобы черный был черным классом, а остальные с помощью ввода tdinput.Таким образом, вы по-прежнему получаете ячейки с номерами без границ:)

<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;
}

Answer 2

Это потому, что входные данные являются встроенными элементами. добавьте display:block; к вашим элементам ввода, и это должно убрать пробел.

.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;
}

В основном добавление display:block; к решению Catfish, так как он также делает правильный вывод о стилях как td, так и input :)

Answer 3

Вы должны снять границу с .inputs и фактически поместить ее в тд.

Попробуйте это

.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;
}

Answer 4

Нижнее поле обусловлено тем, как IE обрабатывает ваш ввод.

Добавление: margin:-1px; такое, что:

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

Кажется, это достаточно хорошо исправить.*