HTML table;如何格式化第二列中的内容以将所有元素（第一个元素除外）向右对齐并拉伸第一个元素以填充剩余宽度

Question

想要显示以下内容：

第一行（Web 项目）中的“...”按钮与红线完全右对齐（有一点填充）
第二行的输入字段（根名称space）向右填充space直到红线（有一点填充） )
其中第 3 行（连接字符串）中的 2 个按钮完全右对齐到红线（带有 liddle 填充）。

我已经尝试了以下方法，但它没有正确执行 - 它只适用于一定的宽度 - 如果我增加或减少宽度，事情就会变得难看：

减小宽度：

我目前的 HTML 看起来像这样：

<div id = "ProjectSelector" width = 100%>
        <table width = "100%" style = "padding-bottom: 10px;">
          <tr>
            <td style="white-space: nowrap; width: 140px;">Web Project (.csproj)</td>
            <td style="width: 99%;" ><input id = "webproj" style="width: 97%"/><button id="webproj_browse">...</button></td>
          </tr>
          <tr>
            <td>Root Namespace</td>
            <td style="width: 99%;"><input id = "rootnamespace" style="width: 99%"/></td>
          </tr>
          <tr>
            <td>Connection String</td>
            <td style="width: 99%;"><select id = "connectionstring" style = "width: 87%"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></td>
          </tr>
        </table>
      </div>

问题：如何格式化 table 和第二列的内容才能正确完成此操作？

Answer 1

您的问题标题描述了典型的 flex 行为。您可以在 table 内部使用弹性容器 :

.flex {
  display: flex;
}

.flex-1 {
  flex-grow: 1;
}

<div id="ProjectSelector" width=1 00%>
  <table width="100%" style="padding-bottom: 10px;">
    <tr>
      <td style="white-space: nowrap; width:0;">Web Project (.csproj)</td>
      <td>
        <div class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></div>
      </td>
    </tr>
    <tr>
      <td>Root Namespace</td>
      <td>
        <div class="flex"><input id="rootnamespace" class="flex-1" /></div>
      </td>
    </tr>
    <tr>
      <td>Connection String</td>
      <td>
        <div class="flex">
          <select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></div>
      </td>
    </tr>
  </table>
</div>

它也可以在没有 table 的情况下使用 grid 或 flex 构建。

对于信息和演示，一个混合网格和 flex 的示例，我一开始可能不会使用这个 HTML 结构 H + P :

* {
  margin: 0;
}

.flex {
  display: flex;
}

.flex-1 {
  flex-grow: 1;
}

#ProjectSelector {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.25em;
  ;
}

p {
  grid-column: 2;
}

<div id="ProjectSelector">
  <h4>Web Project (.csproj)</h4>
  <!-- title that matches your structure or else can be plain text -->
  <p class="flex"><input id="webproj" class="flex-1" /><button id="webproj_browse">...</button></p>
  <h4>Root Namespace</h4>
  <p class="flex"><input id="rootnamespace" class="flex-1" /></p>
  <h4>Connection String</h4>
  <p class="flex">
    <select id="connectionstring" class="flex-1"></select><button id="newConnection">New Connection</button><button id="connstringDelete">Delete</button></p>
</div>

HTML table;如何格式化第二列中的内容以将所有元素（第一个元素除外）向右对齐并拉伸第一个元素以填充剩余宽度

HTML table; How to format content within 2nd column to align all - except first element - to right and stretch 1st element to fill remaining width

html

css

formatting

element