我有一张桌子,我希望2个tds居中 **你好|世界**之前和之后都没有添加空的tds? 我有这样的东西工作正常,但我不想添加额外的TDS并以同样的方式做到
<table class="alignCenter" style="border:1px solid black">
<tr>
<td>
</td>
<td class="searchField">
<select id ="exactField">
<option value="default">Request num</option>
</select>
<input type="text" class="textBox" id="exactValue"/>
</td>
<td class="tableButtons">
<button type="button" class="clear" ><bdi>${Clear_Button}</bdi></button>
<button type="button" class="submit" ><bdi>${Search_Button}</bdi></button>
</td>
<td>
</td>
</tr>
</table>
CSS
table,.alignCenter {
width: 1000px;
margin: 0px auto;
text-align: left;
table-layout: fixed;
font-size: 0.9em;
}
table tr td,.alignCenter tr td {
overflow: hidden;
border: 1px solid black;
vertical-align: top;
padding: 5px 2px 5px 2px;
}
.alignCenter tr td {
text-align : center;
}
.tableButtons {
width:250px;
}
.searchField {
width:300px;
}
答案 0 :(得分:3)
为什么你甚至需要4个td来完成类似的事情?
只需使用一个td
(我会使用一个简单的div)
<table class="alignCenter" style="border:1px solid black">
<tr>
<td>
<select id ="exactField">
<option value="default">Request num</option>
</select>
<input type="text" class="textBox" id="exactValue"/>
<button type="button" class="clear" ><bdi>${Clear_Button}</bdi></button>
<button type="button" class="submit" ><bdi>${Search_Button}</bdi></button>
</td>
</tr>
</table>
答案 1 :(得分:0)
会是这样的吗?
HTML ..
<table style="border:1px solid black">
<tr>
<td class="alignright" >
<select id ="exactField">
<option value="default">Request num</option>
</select>
<input type="text" class="textBox" id="exactValue"/></td>
<td class="alignleft" >
<button type="button" class="clear" ><bdi>${Clear_Button}</bdi></button>
<button type="button" class="submit" ><bdi>${Search_Button}</bdi></button>
</td>
</tr>
</table>
的CSS ..
table,.alignright {
width: auto;
margin: 0px auto;
text-align: right;
table-layout: fixed;
font-size: 0.9em;
}
table,.alignleft {
width: auto;
margin: 0px auto;
text-align: left;
table-layout: fixed;
font-size: 0.9em;
}
.tableButtons {
width:250px;
}
.searchField {
width:300px;
}