如何將表格行中的所有HTML表格數據對齊？

我正在嘗試編輯此代碼以使範圍1和代碼1的文本和輸入字段彼此並排。如何將表格行中的所有HTML表格數據對齊？

設置每個<td>的width到20%或25%沒有做任何事情。
在其上設置align不會移動它們。
我也不知道爲什麼範圍1 /成本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>

來源

2016-02-18 Jayizzle

你能不能給我們整個表爲您例如屏幕截圖？看起來你正在使用嵌套表格，但是缺少' – Sam

作出了更改， – Jayizzle

是否需要四行，每行有一個輸入排，還是你想第三排有範圍和成本並排。 – Brino

使之成爲完整的表頭
一行
樣式化標題爲表格標題。

片段

<!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>

來源

2016-02-18 20:27:00 zer00ne

使用下面的代碼

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

結果

來源

2016-02-18 20:10:04

如何將表格行中的所有HTML表格數據對齊？

回答

相關問題