如何将表格行中的所有 HTML 表格数据对齐为彼此相邻？答案

【问题标题】：How to align all HTML table data in a table row to be next to each other?如何将表格行中的所有 HTML 表格数据对齐为彼此相邻？
【发布时间】：2016-05-31 04:16:11
【问题描述】：

我正在尝试编辑此代码以使 Range 1 和 Code 1 文本和输入字段彼此并排。

将每个<td> 的width 设置为20% 或25% 没有任何作用。
在它们上设置align 不会移动它们。
我也不知道为什么范围 1/cost 1 行设置在右侧。

将两个字段并排设置是可以的，因为将第一个字段向右对齐，另一个向左对齐，会使两者居中。但是有四个，它将整个行按列分隔，这无法将所有内容与我需要的内容对齐。

问题截图：

表格html：

<table border="0" width="80%" align="center" colspan="2">
      <div align="right">
      <tr><td colspan="2" align="center"><H1>Create New Sliding Scale Fee Ranges</H1></td></tr>
       <tr>
        <td  align="center" CLASS="L1">ContractId:</td>
        <td><input type="text" id="ContractId" name="ContractId" value=""/></td>
    </tr>
    <tr>
        <td  align="center" CLASS="L1">Facility:</td>
         <td> <%= prodMgr.getDispenserDDLB(userId, dispenserId, "", "",  "dispenserId") %></td>
    </tr>


    <tr><td colspan="4" align="center">
        <td align="center" CLASS="L1" >1st Range:</td>
            <td>
               <input name="range1" value="" size="10"/>
            </td>


        <td align="center" CLASS="L1">Cost:</td>
        <td>
            <input name="cost1" value="" size="10"/>
        </td>
         </td>
       </tr>

【问题讨论】：

你能给我们整个表格作为你的示例屏幕截图吗？看起来您正在使用嵌套表，但缺少 <td colspan="4" align="center"> 中的开始/结束表标签
您想要四行，每行一个输入，还是想要第三行并排显示范围和成本。
我需要一排，四个整体彼此相邻并正确居中。 Range 1 文本应与 Facility 和 ContractId 文本位于同一列。

标签： html html-table

【解决方案1】：

使它成为一个完整的表头
一行
将标题设置为表格标题。

片段

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>35490934</title>
</head>

<body>
<table border="0" width="80%" align="center" colspan="2">
   
      <caption style="text-align:left"><H1 style="font-family: Arial; color: orange">Create New Sliding Scale Fee Ranges</H1></caption>
      <thead>
      <tr>
        <td  align="center" CLASS="L1">ContractId:</td>
        <td><input type="text" id="ContractId" name="ContractId" value=""/></td>

        <td  align="center" CLASS="L1">Facility:</td>
        
         <td> <input/></td>


 <td colspan="4" align="center">
        <td align="center" CLASS="L1" >1st Range:</td>
            <td>
               <input name="range1" value="" size="10"/>
            </td>


        <td align="center" CLASS="L1">Cost:</td>
        <td>
            <input name="cost1" value="" size="10"/>
        </td>
         </td>
       </tr>
       </thead>
 </table>
</body>
</html>

【讨论】：

【解决方案2】：

使用下面的代码

<style>

tr{
display:inline;
float:left;

}


</style>


<H1>Create New Sliding Scale Fee Ranges</H1>
<table border="0" width="80%" align="center" colspan="2">
  <div align="right">
  <tr><td colspan="2" align="center"></td></tr>
   <tr>
    <td  align="center" CLASS="L1">ContractId:</td>
    <td><input type="text" id="ContractId" name="ContractId" value=""/>    </td>
</tr>
<tr>
    <td  align="center" CLASS="L1">Facility:</td>
     <td> <!--<%= prodMgr.getDispenserDDLB(userId, dispenserId, "", "",  "dispenserId") %>-->
     <select name="Facility"  />
       <option value="some text">some text</option>         

  </td>
</tr>


<tr><td colspan="4" align="center">
    <td align="center" CLASS="L1" >1st Range:</td>
        <td>
           <input name="range1" value="" size="10"/>
        </td>


    <td align="center" CLASS="L1">Cost:</td>
    <td>
        <input name="cost1" value="" size="10"/>
    </td>
     </td>
   </tr>
</table>

结果

【讨论】：