如何删除单个表中两个tds之间的空格

时间：2015-07-14 13:11:06

标签： html css

我在html表中工作，我有多个tds，所以我的问题是我想减少tds之间的空间，使用css如何做到这一点？这是我的代码

<table id="employementInfo">
<tr>
                <th colspan="3" id="currentEmploymentHeading">
                    Current Employment
                </th>
            </tr>
            <tr>
                <th class="empLeftDiv">Current Employment status<span style='color: #FF0000; display: inline;'>*</span></th>
                <% if(employmentStatus.equals("Employeed")) {%>
                <td class="empRightDiv">
                    <input type="radio" name="employementStatus" value="<%=employmentStatus %>" checked>Employeed
                    <input type="radio" name="employementStatus" value="Not Employeed">Not Employeed<br>
                </td>
                <%}else if(employmentStatus.equals("Not Employeed")){%>  
                <td class="empRightDiv">
                    <input type="radio" name="employementStatus" value="Employeed">Employeed
                    <input type="radio" name="employementStatus" value="<%=employmentStatus %>" checked>Not Employeed<br>
                </td>
                <%}
                else {%>  
                <td class="empRightDiv">
                    <input type="radio" name="employementStatus" value="Employeed">Employeed
                    <input type="radio" name="employementStatus" value="Not Employeed">Not Employeed<br>
                </td>
                <%}


                %>
            </tr> 
            <tr>
                <th>Current Title<span style='color: #FF0000; display: inline;'>*</span></th>
                <td class="empRightDiv"><aui:input inlineField="true" label="" name="currentJobTitle" size="45" id="currentJobTitle" value="<%=currentJobTitle %>"/></td>
            </tr>
            <tr>
                <th>Current Employer<span style='color: #FF0000; display: inline;'>*</span></th>
                <td class="empRightDiv"><aui:input inlineField="true" label="" name="currentEmployer" size="45" id="currentEmployer" value="<%=currentEmployer %>"/></td>               
            </tr>
            <tr>
                <th>Preference for next Opportunity</th>
                <% if(nextOppurtunityPreferred.equals("Full Time")) {%>
                <td class="empRightDiv">

                    <input type="radio" name="nextOppurtunityPreferred" value="<%=nextOppurtunityPreferred %>" checked>Full Time
                    <input type="radio" name="nextOppurtunityPreferred" value="<%=nextOppurtunityPreferred %>">Contract roles                   
                </td>
                 <%}else if(employmentStatus.equals("Contract roles")){%>  
                <td class="empRightDiv">

                    <input type="radio" name="nextOppurtunityPreferred" value="<%=nextOppurtunityPreferred %>">Full Time
                    <input type="radio" name="nextOppurtunityPreferred" value="<%=nextOppurtunityPreferred %>" checked>Contract roles                   
                </td>

                <%}else {%>  
                <td class="empRightDiv">

                <input type="radio" name="nextOppurtunityPreferred" value="Full Time">Full Time
                <input type="radio" name="nextOppurtunityPreferred" value="Contract roles">Contract roles                   
                </td> 
                <%}
                %>
            </tr>
            <tr>

                <th>What would be the single biggest motivator in a potential new opportunity?</th>
                <td>
                    <select id="motivator" name="motivator" multiple="multiple">
                        <% while(rs8.next()){
                            motivatorString = rs8.getString("motivators");
                        %>                          
                        <option value ="<%=motivatorString %>" ><%=motivatorString %> </option>

                        <%} %>
                    </select>
                </td>
            </tr>
            <tr>
                <th>How many minutes are you willing to commute to get to work?<span style='color: #FF0000; display: inline;'>*</span></th>
                     <% if(workLocationReachingTime.equals("15-30")) {%>
                    <td>
                        <input type="radio" name="workLocationReachingTime" value="<%=workLocationReachingTime  %>" checked>15-30           
                        <input type="radio" name="workLocationReachingTime" value="30-60">30-60<br>
                        <input type="radio" name="workLocationReachingTime" value="60-90" >60-90            
                        <input type="radio" name="workLocationReachingTime" value="90-120" >90-120<br>
                    </td>
                     <%}else if(workLocationReachingTime.equals("30-60")){%>  
                    <td>
                        <input type="radio" name="workLocationReachingTime" value="15-30" checked>10-30     
                        <input type="radio" name="workLocationReachingTime" value="<%=workLocationReachingTime  %>" checked>30-60<br>
                        <input type="radio" name="workLocationReachingTime" value="60-90" >60-90            
                            <input type="radio" name="workLocationReachingTime" value="90-120" >90-120<br>
                    </td>
                     <%}else if(workLocationReachingTime.equals("60-90")){%>  
                        <td>
                            <input type="radio" name="workLocationReachingTime" value="15-30" checked>10-30 
                            <input type="radio" name="workLocationReachingTime" value="30-60">30-60<br>
                            <input type="radio" name="workLocationReachingTime" value="60-90">60-90         
                            <input type="radio" name="workLocationReachingTime" value="<%=workLocationReachingTime  %>" checked>90-120<br>
                        </td>
                     <%}
                      else if(workLocationReachingTime.equals("90-120")){%>  
                        <td>
                            <input type="radio" name="workLocationReachingTime" value="15-30" checked>10-30 
                            <input type="radio" name="workLocationReachingTime" value="30-60">30-60<br>
                            <input type="radio" name="workLocationReachingTime" value="60-90" >60-90            
                            <input type="radio" name="workLocationReachingTime" value="<%=workLocationReachingTime  %>" checked>90-120<br>
                        </td>
                     <%}
                      else {%>  
                        <td>
                            <input type="radio" name="workLocationReachingTime" value="15-30" >15-30            
                            <input type="radio" name="workLocationReachingTime" value="30-60" >30-60<br>
                            <input type="radio" name="workLocationReachingTime" value="60-90" >60-90            
                            <input type="radio" name="workLocationReachingTime" value="90-120" >90-120<br>
                        </td>
                     <%}
                %>
            </tr>
            <tr>
                <th>Are there areas outside your current location that you would be open to considering new work opportunities in? If so please list below</th>
                <td><aui:input inlineField="true" label="" id="candidateLocationPreference" name="candidateLocationPreference" size="45" value="<%=candidateLocationPreference %>"/></td>
            </tr>
            <tr>
                <th colspan="3" id="currentEmploymentHeading">
                    Annual Compensation Details
                </th>
            </tr>
            <tr>
                <th>Select your currency:</th>
                <td>
                    <select id="currency" name="currency">
                        <%
                        while (rs9.next()) { 
                            String currencyValue = rs9.getString("currencyValue");
                            String currencyName = rs9.getString("currencyName");

                            if(candidateCurrency.equals(currencyValue)){
                                //System.out.println("From DB:"+candidateCurrency+" and Current:"+currencyValue);
                        %>
                        <option value="<%=currencyValue%>" selected><%=currencyName%></option>  
                        <% }else{ %>                        
                        <option value="<%=currencyValue%>"><%=currencyName%></option>
                        <%
                            }
                        }
                        %>
                    </select>
                </td>
            </tr>
            <tr>
                <th>Current Base<span style='color: #FF0000; display: inline;'>*</span></th>
                <td class="empLeftDiv"><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="currentBase" id="currentBase" size="45" value="<%=currentBase %>"/><span id="errmsg4"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="currentBaseInUSD" id="currentBaseInUSD" size="45" value="<%=currentBaseUSD %>" readonly="readonly"/></td>
            </tr>

            <tr>
                <th>Bonus Potential<span style='color: #FF0000; display: inline;'>*</span></th>
                <td><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="bonusPotential" id="bonusPotential" size="45" value="<%=bonusPotential %>"/><span id="errmsg5"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="bonusPotentialInUSD" id="bonusPotentialInUSD" size="45" value="<%=bonusPotentialUSD %>" readonly="readonly"/></td>
            </tr>
            <tr>
                <th>Benefits</th>
                <td><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="benefits" id="benefits" size="45" value="<%=benefits %>"/><span id="errmsg6"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="benefitsInUSD" id="benefitsInUSD" size="45" value="<%=benefitsUSD %>" readonly="readonly"/></td>
            </tr>               
            <tr>
                <th>Car Allowance</th>
                <td><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="carAllowance" id="carAllowance" size="45" value="<%=carAllowance %>"/><span id="errmsg8"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="carAllowanceInUSD" id="carAllowanceInUSD" size="45" value="<%=carAllowanceUSD %>" readonly="readonly"/></td>
            </tr>
            <tr>
                <th>Annual Stock (Cash Value)</th>
                <td><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="stock" id="stock" size="45" value="<%=stock %>"/><span id="errmsg9"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="stockInUSD" id="stockInUSD" size="45" value="<%=stockUSD %>" readonly="readonly"/></td>
            </tr>
            <tr>
                <th>Total Current Compensation<span style='color: #FF0000; display: inline;'>*</span></th>
                <td><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="totalCompensation" id="totalCompensation" size="45" value="<%=totalCompensation %>" readonly="readonly"/><span id="errmsg10"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="totalCompensationInUSD" id="totalCompensationInUSD" size="45" value="<%=totalCompensationUSD %>" readonly="readonly"/></td>
            </tr>
            <tr>
                <th>Total Compensation Expectation<span style='color: #FF0000; display: inline;'>*</span></th>
                <td><span class="CurrencySymbol"><b>$</b></span><aui:input inlineField="true" label="" name="totalExpected" id="totalExpected"  size="45" value="<%=totalExpected %>"/><span id="errmsg11"></span></td>
                <td class="empRightDiv"><b>$</b><aui:input inlineField="true" label="" name="totalExpectedInUSD" id="totalExpectedInUSD" size="45" value="<%=totalExpectedUSD %>" readonly="readonly"/></td>
            </tr>
            <tr>
                <th>Vacation (in Days)</th>
                <td><aui:input inlineField="true" label="" name="vacation" id="vacation" size="45" value="<%=vacation %>"/><span id="errmsg7"></span></td>

            </tr>

            <br>            

    <table width="9%">
        <tr>
            <td align="center">
                <aui:button type="submit" name="Submit" value="Save" style="width: 160px height:49px;" onclick="employeementDetails();"></aui:button>
            </td>
            <td align="center">
                <aui:button type="submit" name="Submit" value="Close" style="width: 160px height:49px;" onclick="hideEmployeement();"></aui:button>
            </td>       
        </tr>
    </table>

我正在尝试使用css类

   #employementInfo{
    border-collapse: collapse;
   }
.empRightDiv{
  width: 20%;
  padding:0px;
  margin:0px;
 }

但它没有用，有人请求帮助。

2 个答案:

答案 0 :(得分：2)

试试这个css。

<style>
table{
    border-collapse: collapse;
}
table tr td{
padding:0px;
margin:0px;
border:0px;
}
</style>

或者如果您想与您的班级一起使用。然后尝试使用margin和padding属性。

#employementInfo{
border-collapse: collapse;
}
.empRightDiv{
width: 20%;
padding:0px;
margin:0px;
}

答案 1 :(得分：1)

您可以像这样使用border-collapse: collapse减速表：

table {
    border-collapse: collapse;
}

考虑下面的代码段：

table#firstTbl{
    border-collapse: collapse;
}
table#secondTbl{
    border-collapse: separate;
}

.red{
  background-color: #FF0000;
}
.orange{
  background-color: #FFA500;
}
.yellow{
  background-color: #FFF200;
}
.brown{
  background-color: #834F00;
}
<table id="firstTbl">
  <tr>
    <td class="red">
      <p>This is content</p>
    </td>
    <td class="orange">
      <p>This is content</p>
    </td>       
  </tr>
  <tr>
    <td class="yellow">
      <p>This is content</p>
    </td>
    <td class="red">
      <p>This is content</p>
    </td>
  </tr>
</table>
<br>
<hr>
<br>
<table id="secondTbl">
  <tr>
    <td class="red">
      <p>This is content</p>
    </td>
    <td class="orange">
      <p>This is content</p>
    </td>       
  </tr>
  <tr>
    <td class="yellow">
      <p>This is content</p>
    </td>
    <td class="red">
      <p>This is content</p>
    </td>
  </tr>
</table>

修改

如您所见，ID为firstTbl的表格为border-collapse: collapse，而ID为secondTbl的表格为border-collapse: separate。

相关问题
最新问题