html - 在表格内居中对齐 tds 而不创建空 tds？

Question

我有一张桌子，我想要 2 个 tds 居中像 ** 你好 | 世界**前后不加空tds？我有类似的东西可以正常工作，但我不想添加额外的 tds 并以同样的方式做

<table class="alignCenter" style="border:1px solid black">  
                <tr>
                <td>&nbsp;
                </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>&nbsp;
                    </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;
 }

小提琴

Answer 1

为什么你甚至需要 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>

Answer 2

像这样的东西会起作用吗？

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

小提琴