Question

我有这个HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
   <HEAD>
   <script type='text/javascript' src='js/jquery-1.10.2.min.js'></script>
   <script type='text/javascript' src='js/knockout-3.0.0.js'></script>
   <script type='text/javascript' src='js/myTasks.js'></script>
   <link rel="stylesheet" type="text/css" href="css/walk.css">
      <TITLE>Your Tasks</TITLE>
   </HEAD>
   <BODY>
    <div class="screenSection">
        <div class="sectionHeader">
            <p>Your Tasks</p>
        </div>
        <div class="lines">        

        <table class="dataTable" id="CADataTable">
<thead>
    <tr>
        <th style="width: 15em;"> Project name</th>
        <th style="width: 7em;"> Number</th>        
        <th style="width: 50em;"> description</th>
        <th style="width: 5em;"></th>
    </tr>   
</thead>
<tbody data-bind="foreach: Assimilation">
    <tr>
        <td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
        <td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
        <td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
        <td style="width: 5em;">
                <img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation"> 
        </td>
    </tr>
</tbody>
</table>
<button type="button" id="export" class="button" data-bind="click: newAssimilation">Add new row</button>


        </div>
    </div>
   </BODY>
</HTML>

现在一切正常，但是当我按下添加新行按钮时，我会遇到这个丑陋的事情：

enter image description here

我正在使用这个css：

@CHARSET "UTF-8";

.formElement { height: auto; margin: 0 0.4em; padding: 0 0 0.5em 0.5em; min-width: 40%; display: inline-block;}
.formElement label {
    display: block;
    font-size: 1.7em;
    margin: 0.8em 0 0.1em 0.15em;
    width: 17.89em;
}
.formElement textarea { border: 1px solid #CCCCCC; padding: 2px; font-size: 1.15em; }
.formElement span { font-size: 1.05em; font-weight: bold; }
.lines { overflow: hidden; }
#commentInformation .formElement { width: 80%; }
input[type="text"] { border: 1px solid #CCCCCC; padding: 0.2em; height: 22px; width: 250px }
fileSelection { width: 50em; height: 30px; }
input:focus,textarea:focus,select:focus{
    -webkit-box-shadow:0 0 6px #007eff;
    -moz-box-shadow:0 0 5px #007eff;
    box-shadow:0 0 5px #007eff; outline: none; }
td
{
    background: #A9D0F5;
    text-align: center;
    height:2em;
}
th
{
    height:2em;
}

.trClass
{
height:2em;
    white-space: nowrap;
}

table
{
    width: 98%;
    font-size: 1.2em;
    clear: both;
}

我要做的是删除蓝色空间。

我1000％肯定我在某个地方犯了一个小错误，但这是我的第一次尝试。我是一个后端开发人员，我很难在代码中发现任何无意义的东西。请帮帮我！

编辑：

JSFIDDLE

Answer 1

试试这个小提琴http://jsfiddle.net/37sbw/5/

您需要删除

       background: #A9D0F5;

申请了td

保持这样

 td
 {
    //background: #A9D0F5;
    text-align: center;
    height:2em;
 }

我甚至添加了

  cellspacing="0px"

到表中删除单元格之间的间距。

如果未应用cellspacing，请转到此

      table
     {
       border-spacing:0px;
     }

Answer 2

制作细胞间距＆amp;单元格填充为0px

Answer 3

我猜你的意思是输入字段不会占用父母的所有宽度。

您已指定内联样式。这将覆盖您放在单独的工作表中的CSS。

<td><input type="text" name="Name" id="Name" data-bind="value: Name" style="width: 15em;"></td>
<td><input type="text" name="Num" data-bind="value: Num" style="width: 7em;"></td>
<td><input type="text" name="Desc" data-bind="value: Desc" style="width: 50em;"></td>
<td style="width: 5em;">
        <img src="img/close.jpg" alt="Close" data-bind="click: $root.removeAssimilation"> 
</td>

摆脱style=""的所有出现，它应该按预期的方式工作。

此外，将CSS更改为：

input[type="text"] {width: 100%;}

Answer 4

将表格border-spacing设为0：

table {
   width: 98%;
   font-size: 1.2em;
   clear: both;
   border-spacing: 0;
}

这将消除细胞之间的空白区域。

<强> jsFiddle

为什么我的桌子上有丑陋的空间

4 个答案: