HTML表格列寬度取決於表格的其餘部分

我有一張表格，其中一列顯示輸入內容的標籤，然後第二列顯示輸入類型。但是，我有兩個單選按鈕，但我希望兩個單選按鈕的寬度更小，而不依賴於html表格的其餘部分。HTML表格列寬度取決於表格的其餘部分

例子。

<table style="line-height:30px;"> 
    <tr> 
     <td> 
      <label>test</label> 
     </td> 
     <td width="50px"></td> 
     <td> 
      <input type="text" /> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <label>example</label> 
     </td> 
     <td width="50px"></td> 
     <td> 
      <input type="radio" name="example" value="1"/> 1 
     </td> 
     <td> 
      <input type="radio" name="example" value="2"/> 2 
     </td> 
    </tr> 
</table>

它看起來像

enter image description here

但我想2單選按鈕移動到更靠近1號單選按鈕，我將如何實現這一目標？

感謝

來源

2014-09-19 user3428422

把兩者放在同一個TD單元中怎麼樣？ – Leo 2014-09-19 22:09:46

如果你不希望它像桌子一樣行事，你爲什麼要用桌子？ – recursive 2014-09-19 22:15:15

試試這個（你一樣除了跨度屬性）：

<table style="line-height:30px;"> 
<tr> 
    <td> 
     <label>test</label> 
    </td> 
    <td width="50px"></td> 
    <td colspan="2"> 
     <input type="text" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <label>example</label> 
    </td> 
    <td width="50px"></td> 
    <td> 
     <input type="radio" name="example" value="1"/> 1 
    </td> 
    <td> 
      <input type="radio" name="example" value="2"/> 2 
     </td> 
    </tr> 
</table>

來源

2014-09-19 22:15:13

省長謝謝，將標記爲答案 – user3428422 2014-09-19 22:22:30

我不會用表，因爲它們已被棄用建議。我使用了基於div的佈局和分配的類。這樣做可以更好地控制內容。這是我想出來的。你可以修改它來設置單選按鈕的樣式。

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>center a div within a div?</title> 

<style type="text/css"> 

.text-input{ 
    text-align: center; 
    padding: 10px; 
    color: green; 
} 

.label{ 
    padding: 15px; 
} 

.enter-text:hover{ 
    border: thin solid #000099; 
} 


.radio-buttons{ 
    text-align: center; 
    padding: 10px; 
} 

.radio{ 
    margin-left: 30px; 
} 

.radio2{ 
    margin-left:59px; 
} 

</style> 

</head> 

<body> 

<div class="text-input"> 
    <label class="label">test</label> 
    <input type="text" class="enter-text" /> 

</div> 

<div class="radio-buttons"> 
    <label>example</label> 
    <input type="radio" name="example" value="1" class="radio"/> 1 
    <input type="radio" name="example" value="2" class="radio2"/> 2 
</div> 
</body> 
</html>

來源

2014-09-19 22:57:24

HTML表格列​​寬度取決於表格的其餘部分

回答

相關問題

HTML表格列寬度取決於表格的其餘部分