html - 如何让 td 占据 tr 的 50%

Question

我有以下片段。它有一个问题 - Enter your passcode: td 占用太多空间，而且看起来很丑。

我尝试将 width:50% 设置为那个，但没有成功。

我想要实现的是输入字段与 Expertise Organization 按钮对齐。

我该怎么做？

提前致谢。

.prettyEGRZButton {
  width: 100%; 
  padding: 20px; 
  text-align: center; 
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px; 
  cursor:	pointer;
  border-radius: 12px; 
  border: 1px solid #05788d;
   	  color: #05788d;
  background: transparent;
}

.prettyEGRZButtonActive {
 color: white;
 background: #05788d;
}

<div id="view:_id1:egrzFinishAuthPopUp" class="egrzFinishAuthPopUp">
  <div id="view:_id1:organizationsRepeat">
  </div>
  <div id="view:_id1:rolesRepeat">
  </div>
  <table id="view:_id1:egrzFinishAuthPopUpTable" role="presentation">
    <tbody>
      <tr align="center">
        <td>
          <span class="xspTextLabel">To proceed, please authorize</span>
        </td>
      </tr>
      <tr align="center">
        <td>
          <span class="xspTextLabel">Authorize as natural person</span>
        </td>
      </tr>
      <tr id="view:_id1:authAsPersonTr">
        <td id="view:_id1:authAsPersonTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:authAsPersonButton" id="view:_id1:authAsPersonButton">John Doe</button>
        </td>
      </tr>
      <tr align="center">
        <td>
          <span class="xspTextLabel">Authorize as organization</span>
        </td>
      </tr>
      <tr id="view:_id1:organizationsRepeat:0:authAsOrgTr">
        <td id="view:_id1:organizationsRepeat:0:authAsOrgTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:organizationsRepeat:0:authAsOrgButton" id="view:_id1:organizationsRepeat:0:authAsOrgButton">Company 1</button>
        </td>
      </tr>
      <tr id="view:_id1:organizationsRepeat:1:authAsOrgTr">
        <td id="view:_id1:organizationsRepeat:1:authAsOrgTd">
          <button class="prettyEGRZButton prettyEGRZButtonActive" type="button" name="view:_id1:organizationsRepeat:1:authAsOrgButton" id="view:_id1:organizationsRepeat:1:authAsOrgButton">Company 2</button>
        </td>
      </tr>
      <tr id="view:_id1:rolesRepeat:0:roleTr">
        <td id="view:_id1:rolesRepeat:0:roleTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:0:roleButton" id="view:_id1:rolesRepeat:0:roleButton">Government Organization</button>
        </td>
      </tr>
      <tr id="view:_id1:rolesRepeat:1:roleTr">
        <td id="view:_id1:rolesRepeat:1:roleTd">
          <button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:1:roleButton" id="view:_id1:rolesRepeat:1:roleButton">Expertise Organization</button>
        </td>
      </tr>
      <tr>
        <td>
          <span class="xspTextComputedField">Enter your passcode:</span>
        </td>
        <td>
          <input id="view:_id1:inputText1" type="password" name="view:_id1:inputText1" value="" class="xspInputFieldSecret">
        </td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

您的第一对 tr 只有一个 td。所以底层 tr 需要兑现它。您可以使用两行使其对齐。

.prettyEGRZButton
	{
		width: 100%; 
		padding: 20px; 
		text-align: center; 
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px; 
		cursor:	pointer;
		border-radius: 12px; 
		border: 1px solid #05788d;
		
		color: #05788d;
		background: transparent; 
	}
	
	.prettyEGRZButtonActive
	{ 
		color: white;
		background: #05788d;
	}

.xspInputFieldSecret{
width:100%;
}

<div id="view:_id1:egrzFinishAuthPopUp" class="egrzFinishAuthPopUp"><div id="view:_id1:organizationsRepeat">
</div><div id="view:_id1:rolesRepeat">
</div><table id="view:_id1:egrzFinishAuthPopUpTable" role="presentation"><tbody><tr align="center"><td><span class="xspTextLabel">To proceed, please authorize</span></td>
</tr>
<tr align="center"><td><span class="xspTextLabel">Authorize as natural person</span></td>
</tr>
<tr id="view:_id1:authAsPersonTr"><td id="view:_id1:authAsPersonTd"><button class="prettyEGRZButton" type="button" name="view:_id1:authAsPersonButton" id="view:_id1:authAsPersonButton">John Doe</button></td>
</tr>
<tr align="center"><td><span class="xspTextLabel">Authorize as organization</span></td>
</tr>
<tr id="view:_id1:organizationsRepeat:0:authAsOrgTr"><td id="view:_id1:organizationsRepeat:0:authAsOrgTd"><button class="prettyEGRZButton" type="button" name="view:_id1:organizationsRepeat:0:authAsOrgButton" id="view:_id1:organizationsRepeat:0:authAsOrgButton">Company 1</button></td>
</tr>
<tr id="view:_id1:organizationsRepeat:1:authAsOrgTr"><td id="view:_id1:organizationsRepeat:1:authAsOrgTd"><button class="prettyEGRZButton prettyEGRZButtonActive" type="button" name="view:_id1:organizationsRepeat:1:authAsOrgButton" id="view:_id1:organizationsRepeat:1:authAsOrgButton">Company 2</button></td>
</tr>

<tr id="view:_id1:rolesRepeat:0:roleTr"><td id="view:_id1:rolesRepeat:0:roleTd"><button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:0:roleButton" id="view:_id1:rolesRepeat:0:roleButton">Government Organization</button></td>
</tr>
<tr id="view:_id1:rolesRepeat:1:roleTr"><td id="view:_id1:rolesRepeat:1:roleTd"><button class="prettyEGRZButton" type="button" name="view:_id1:rolesRepeat:1:roleButton" id="view:_id1:rolesRepeat:1:roleButton">Expertise Organization</button></td>
</tr>


<tr><td><span class="xspTextComputedField">Enter your passcode:</span></td>
</tr><tr>
<td><input id="view:_id1:inputText1" type="password" name="view:_id1:inputText1" value="" class="xspInputFieldSecret"></td>
</tr>
</tbody></table>
</div>