表格单元格内的文本框,周围没有边距

时间:2013-12-29 03:14:55

标签: javascript php mysql html-table

我想知道如何将一个文本框放在一个表格单元格或<TD>中,并使其文本框的宽度和高度与表格单元格相同,因此文本框周围没有可见的边距或空白区域

我在我试图制作的网站上尝试了这个但是它搞砸了,现在我的桌子上没有任何边框可见。我只是想制作一个excel的php版本,这样我的用户就可以一次编辑一组/一批记录。

这是我的网页显示的内容:

enter image description here

这就是我要复制的内容,即excel单元格特征,其中单元格之间没有空格,或者如果存在则使其非常薄。

enter image description here

我可能影响到的代码是:

echo "<style type='text/css'>
.bordmargset{
 border:none;
 width:100%;
 height:100%;
}
</style>";

echo "<table border='1' style='width:100%; font-family:arial,Serif;font-style:regular;font-size:12px; color:black' CELLPADDING='0' CELLSPACING='0'>
<tr>
<th>Property Case</th>
<th>Address</th>
<th>City</th>
<th>State</th>
<th>Zip Code</th>
<th>County</th>
<th>Price</th>
<th>Bed</th>
<th>Bath</th>
<th>Square Foot</th>
<th>Year Built</th>
<th>As Is Value</th>
<th>Hud Type</th>
<th>Main Type</th>
</tr>";

while($row = mysqli_fetch_array($result))
  {
  echo "<tr onclick='mclick(this)' onmouseover='mover(this)' onmouseout='mout(this)'>";
  echo "<td class='bordmargset'><input style='border:none;background-color:transparent;' type='text' value='" . $row['Property Case'] . "'></td>";
  echo "<td class='bordmargset'><input type='text' value='" . $row['Address'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['City'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['State'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Zip Code'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['County'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Price'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Bed'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Bath'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Square Foot'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Year Built'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['As Is Value'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Hud Type'] . "'></td>";
  echo "<td style='border:0;padding:0;margin:0;'><input type='text' value='" . $row['Main Type'] . "'></td>";
  echo "</tr>";
  }
echo "</table><br>";

1 个答案:

答案 0 :(得分:2)

<style type="text/css">
.invisibletb{
 border:none;
 width:100%;
 height:100%;
}
</style>

<table class="tftable" border="1">
<tr><th>Invisible TextBox</th></tr>
<tr><td><input type="text" class="invisibletb" /></td></tr>
</table>

Demo